css属性的选择对动画性能的影响_html/css_WEB-ITnose

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

快速进入主题，大家先来看个demo。我分别使用了left和transform在2秒内向右平移了500px的位移。代码如下：

 .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);}}  


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

          
声明：本文来自网络，不代表【好得很程序员自学网】立场，转载请注明出处：http://haodehen.cn/did114326