css3动画的性能优化

时间 2019-11-30

标签 css3 css 动画性能优化栏目 CSS 繁體版

原文原文链接

目前对提高移动端CSS3动画体验的主要方法有几点：
尽量多的利用硬件能力，如使用3D变形来开启GPU加速html

-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);

一个元素经过translate3d右移500px的动画流畅度会明显优于使用left属性；

缘由是由于：

CSS动画属性会触发整个页面的重排relayout、重绘repaint、重组recomposite
Paint一般是其中最花费性能的，尽量避免使用触发paint的CSS动画属性，这也是为何咱们推荐在CSS动画中使用webkit-transform: translateX(3em)的方案代替使用left: 3em，由于left会额外触发layout与paint，而webkit-transform只触发整个页面composite（这也是为何推荐在CSS动画中使用webkit-transform: translateX(500px)的方案代替使用left: 500px）；

web

如动画过程有闪烁（一般发生在动画开始的时候），能够尝试下面的Hack：性能

-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-ms-backface-visibility: hidden;
backface-visibility: hidden;
 
-webkit-perspective: 1000;
-moz-perspective: 1000;
-ms-perspective: 1000;
perspective: 1000;

尽量少的使用box-shadows与gradients动画

box-shadows与gradients每每都是页面的性能杀手，尤为是在一个元素同时都使用了它们.spa

尽量的让动画元素不在文档流中，以减小重排3d

position: fixed;
position: absolute;

性能消耗图orm

性能消耗图，因而可知最受欢饮和性能最好的莫过于transform和opacity了。htm

其实呢，opacity和transform能解决的问题已经不少了，尽可能少的使用其余的属性去进行动画制做吧blog