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

    原文作者:衣桉雁
    原文地址: https://www.jianshu.com/p/a462f337a77b
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞