css属性的选择对动画性能的影响-dehua.Chen

现在手机的占比越来越高，各种酷炫页面层出不穷，这些特效都离不开css动画。说到css动画，主流的情况也就无非这两大类：位移和形变。而我们在写一个动画特效的过程中，如何去提升它的性能呢？当然首先我们需要去了解一下基本的概念，比如浏览器渲染的工作原理等，这些我也在读了几位大牛写的相关文章后才有了一定的了解，这边我也不细说了，有兴趣的同学可以去了解一下。本次的目的简单粗暴地讲，其实就是我们应该使用什么css属性去进行动画的绘制时，能够有效的提高浏览器在渲染和绘制过程中的性能。

分别使用了left和transform在2秒内向右平移了500px的位移。代码如下：

   style  >  
.box-ps,.box-tf  {  position  :  absolute  ;  top  :  0  ;  left  :  0  ;  width  :  100px  ;  height  :  100px  ;  background-color  :  red  ;  }  
.box-ps  {  -webkit-animation  :  box-ps 2s linear  ;  }  
.box-tf  {  -webkit-animation  :  box-tf 2s linear  ;  }  

@-webkit-keyframes box-ps  {  
0%{
left  :  0  ; 
 }  100%  {  
left  :  500px  ; 
 }  
}

@-webkit-keyframes box-tf  {  
0%{
-webkit-transform  :  translate(0,0)  ; 
 }  100%  {  
-webkit-transform  :  translate(500px,0)  ; 
 }  
}
    style  > 

   body  > 
   div   class  ="box-ps"  >  div  > 
   div   class  ="box-tf"  >  div  > 
   body  >  

查看更多关于css属性的选择对动画性能的影响-dehua.Chen的详细内容...