css3动画优化

移动端css动画优化

css3的动画已经应用得十分广泛了，很多效果在pc的浏览器上表现完美，但是迁移到移动端简直卡得让人抓狂，尤其是安卓手机，苹果手机表现相对好很多。这个卡顿现象是无法完全避免的，只能优化。下面提供一些优化的原则：

1.开启3d变形来开启GPU加速：

transform：translateZ(0)；

优点: 方法简单粗暴，但是很有效，动画效果确实会流畅很多.

缺点： 对手机的性能开销很大，可以明显的感觉到发热变严重。还有一个很让人郁闷的现象就是会影响到绝对定位的元素。eg：曾经遇到过页面向上滚动的时候，绝对定位的元素比页面滚动的速度慢，产生跳跃现象。

解决方案：目前没有办法完全的避免掉这个问题，可以选择在动画开始前开启加速，然后在动画结束后去除掉GPU加速。

2.动画过程有闪烁的情况时，可以试试：

backface-visibility: hidden;
perspective: 1000;

3.动画一般会触发页面的重排，重绘，重组,其中重绘对性能的影响最大，所以如果有触发重绘的操作最好用用别的来替代。

比如说：位置的移动，变化left就不如使用transform

4.让动画元素脱离文档流，采用absolute或者flexed等方法，减少页面重绘。

5.避免在动画中使用box-shadows与gradients