移动端css动画优化
css3的动画已经应用得十分广泛了，很多效果在pc的浏览器上表现完美，但是迁移到移动端简直卡得让人抓狂，尤其是安卓手机，苹果手机表现相对好很多。这个卡顿现象是无法完全避免的，只能优化。下面提供一些优化的原则：
1.开启3d变形来开启GPU加速：
transform：translateZ(0)；
优点: 方法简单粗暴，但是很有效，动画效果确实会流畅很多.
缺点： 对手机的性能开销很大，可以明显的感觉到发热变严重。还有一个很让人郁闷的现象就是会影响到绝对定位的元素。eg：曾经遇到过页面向上滚动的时候，绝对定位的元素比页面滚动的速度慢，产生跳跃现象。
解决方案：目前没有办法完全的避免掉这个问题，可以选择在动画开始前开启加速，然后在动画结束后去除掉GPU加速。
2.动画过程有闪烁的情况时，可以试试：
backface-visibility: hidden;
perspective: 1000;
3.动画一般会触发页面的重排，重绘，重组,其中重绘对性能的影响最大，所以如果有触发重绘的操作最好用用别的来替代。
比如说：位置的移动，变化left就不如使用transform
网友评论