(1) translate3d 进行 gpu 加速

写动画时候写这个，保证性能加速10%以上

-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动画属性会触发整个页面的重排，重绘。
Paint通常是其中最花费性能的，尽可能避免使用触发paint的CSS动画属性，这也是为什么我们推荐在CSS动画中使用webkit-transform: translateX(3em)的方案代替使用left: 3em，因为left会额外触发layout与paint，而webkit-transform只触发整个页面composite（这也是为什么推荐在CSS动画中使用webkit-transform: translateX(500px)的方案代替使用left: 500px）；

(2) box-shadow和gradients

这两个东西在css3里往往都是页面的性能杀手，计算他们尤其消耗cpu, 尤其是在一个元素同时都使用了它们，所以拥抱扁平化设计吧;

性能消耗图，由此可见最受欢饮和性能最好的莫过于transform和opacity了。

其实呢，opacity和transform能解决的问题已经很多了，尽量少的使用其他的属性去进行动画制作吧

最后呢，补充一些额外知识：

现代浏览器在使用CSS3动画时，以下四种情形绘制的效率更高：

其实，对于每一帧动画，浏览器可能要做以下工作

如果我们需要使得动画的性能提高，需要做的就是减少浏览器在动画运行时所需要做的工作。最好的情况是，改变的属性仅仅是图层的组合，变换（transform）和透明度（opacity）就属于这种情况

现代浏览器如Chrome，Firefox，Safari和Opera都对变换和透明度采用硬件加速，但IE10+不是很确定是否硬件加速

一些常用的改变时会触发重布局的属性：
盒子模型相关属性会触发重布局：

定位属性及浮动也会触发重布局：

改变节点内部文字结构也会触发重布局：

这么多常用属性都会触发重布局，可以看到，他们的特点就是可能修改整个节点的大小或位置，所以会触发重布局

触发重绘的属性
修改时只触发重绘的属性有：

这样可以看到，这些属性都不会修改节点的大小和位置，自然不会触发重布局，但是节点内部的渲染效果进行了改变，所以只需要重绘就可以了

结论：

动画给予了页面丰富的视觉体验。我们应该尽力避免使用会触发重布局和重绘的属性，以免失帧。最好提前申明动画，这样能让浏览器提前对动画进行优化。由于GPU的参与，现在用来做动画的最好属性是如下几个：