css动画优化

减少动画元素

减少动画元素，是动画性能优化中首先需要完成的。通过审查页面动画 DOM 元素结构，去除不必要的动画元素，减少元素的数量，相应地会减少布页面局和绘制的时间。

尽量使用 fixed、absolute 定位

对于动画元素，尽量使用用 fixed、absolute 定位方式，避免影响到其他节点重排。

尽量只改变transform和opacity

能用 transform、opacity 优先使用，其属性的改变不会发生重排和重绘。如位移操作的，可以使用translate 来实现，渐隐渐现效果可以使用 opacity 属性来实现。

恰当开启硬件加速效果

对动画元素应用transform: translate3d(0, 0, 0)、will-change: transform等来开启硬件加速。通常开启硬件加速可以让动画变得更加流畅。但这里需注意，在不需要的时候需去掉避免过多的内存消耗。

transform: translate3d(0, 0, 0);transform: translateZ(0);will-change: transform;