关于css动画的优化

在动画中，为了实现流畅的60帧的动画效果，每一帧都需要在16毫秒左右完成渲染。  时间非常短，所以我们需要找到合适高效的方法来渲染每一帧的内容，从而实现流畅的效果。

在我之前的动画实现中，并没有留意动画的优化。直到看到了一篇文章 《10个原则让动画带你飞》 才明白动画的优化。

在CSS动画的实现中，我们常用的优化手段就是在@keyframes name{}中尽量多写一些帧数。

即@keyframes name{

0%: 

25%:

50%:

75%:

100%:

}

这种效果是远好于

@keyframes name{

0%:

100%:

}

的

但是拜读了那篇动画优化文章之后，我才知道浏览器在处理margin left width 等属性时，会耗费很大的性能，因为这会导致浏览器重绘。

所以：

1！ 除了透明度(opacity)  和 切换(transform) ，不要改变任何属性

transform 是完全可以处理改变元素的大小，位置等需求的。

opacity  可以隐藏元素。 

2！ 不要一次性给所有内容都设置动画

因为单一的动画会非常流畅，但是和其他动画糅杂在一起的时候，就不那么流畅了。

所以需要给动画编排合理的时间。

3！  另外一个是利用translate3d(20px, 20px, 0)来创建一个3d图层，来使得浏览器能够调用GPU来帮助渲染。

这种方式可以消除在动画开始之前的图层创建时间，使得动画尽快开始（创建图层和绘制图层还是比较慢的），而且不会随着抗锯齿而导出突变。不过这种方法需要节制，否则会因为创建过多的图层导致崩溃