深层次了解css特性的挑选对动漫特性的危害

如今手机上的占有率愈来愈高，各种各样炫酷网页页面五花八门，这些殊效都离不开css动漫。说到css动漫，流行的状况也就不过这两大类：位移和变形。而大家在写1个动漫殊效的全过程中，怎样去提高它的特性呢？自然最先大家必须去掌握1下基础的定义，例如访问器3D渲染的工作中基本原理等，这些我也在读了几位大牛写的有关文章内容后才有了1定的掌握，这边我也不细说了，有兴趣爱好的同学能够去掌握1下。本次的目地简易粗鲁地讲，实际上便是大家应当应用甚么css特性去开展动漫的绘图时，可以合理的提升访问器在3D渲染和绘图全过程中的特性。

各自应用了left和transform在2秒内向右平移了500px的位移。编码以下：

随后在chrome下获得了以下的結果，第1张为应用left的截图，第2张为应用transform的截图：

transform的截图

 

不言而喻，大家在帧方式这里能够看到left比transform帧数要低，并且在3D渲染和绘图这边的耗时，left要远远的超过transform。看到这里，坚信大伙儿内心早已有结果了。
大家再运用chrome的show paint rectangles来观查1下二者在动漫全过程中，3D渲染和绘图的地区有何差别,第1张为应用left的截图，第2张为应用transform的截图：

transform的截图

大家能够看到，应用left写的全部动漫全过程中，访问器1直在开展绘图解决。而相对性而言，应用transform时，仅仅是在动漫刚开始和完毕是开展了绘图。因而，针对动漫的特性上，transform要更加优异。至于缘故，这里就要引进1个开启再次合理布局的定义：

大家在更改1些特性时，假如是跟layout有关的特性，则会开启再次合理布局，致使3D渲染和绘图所必须的時间可能更长。因而，大家在写动漫的情况下因该避开这些特性：width, height, margin, padding, border, display, top, right, bottom ,left, position, float, overflow等。
不容易考虑再次合理布局的特性有：transform(在其中的translate, rotate, scale), color, background等。

因此，大家平常在写css动漫时，应当优先选择应用不开启再次合理布局的特性，这样可使大家所展现动漫实际效果的更为顺畅。

以上这篇深层次了解css特性的挑选对动漫特性的危害便是网编共享给大伙儿的所有內容了，期待能给大伙儿1个参照，也期待大伙儿多多适用脚本制作之家。

原文详细地址：http://www.cnblogs.com/dehua-chen/archive/2016/04/20/5411728.html