CSS动画

[zhouzhongyuan]

Property	Translate	Key Point	Example
animation	动画	keyframes	animation
transition	过度	transition: width 2s;	transition demo
tranform	变换	RST	tranform

[zhouzhongyuan]

• Web动画性能指南

[zhouzhongyuan]

• react-native-web中页面切换使用了transform

[zhouzhongyuan]

<Web动画性能指南>总结

硬件加速

近些年来，现代浏览器借助于显卡的优势改变了渲染操作：通常被笼统的称为“硬件加速(hardware acceleration)”。
以Chrome为例，在硬件加速渲染通道下，复杂的页面会被分为多个层(Layer)， Chrome对各个层分别进行排版、绘图，再将绘图结果作为“纹理”上传至GPU， 由GPU完成层的3D变换(transform)等操作，最后再将GPU渲染好的层图像进行复合操作(Compesite Layers)，得到最终的画面结果。 因此，通过3D变换实现的位移、旋转、缩放将不会触发浏览器重绘（除非层的内容发生改变）。
可见，可以避免重绘的层模型对于动画调优有着重大意义。

调试(Chrome)

Layer: Ctrl + Shift + P, search 'layer'

[zhouzhongyuan]

页面切换动画

• 基于CSS3的WEBAPP横向滑动模式演化 – 携程设计委员会
• css属性的选择对动画性能的影响 – 携程设计委员会

[zhouzhongyuan]

ShrinkView

图1(toolBarExpand)

图2(collapseView)

图3(toolBarCollapse)

行为

向上滚动

图1 + 图2 -> 图3
图1 立马消失
图3 透明度逐渐降低
图2 高度逐渐变为0