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