CSS3 Animate or JS Animate ?

既然 CSS3 和 jquery 都可以实现动画， 那么到底哪中方式的执行效率更高呢，我们简单的来比较一下吧。

首先考虑一下，改变 DOM 样式导致浏览器重绘有两种方式，一种是单纯的重绘，页面布局没有受到影响（如改变盒子的背景色，修改字体颜色，修改透明度...）；另外一种是在重绘之前会触发 Rendering（回流），也就是页面布局受到了影响，需要重新布局，在重绘页面。下面我们分别对这两种情况进行测试。

测试重绘

写了两个 DEMO，都是改变 div 的背景色：

• CSS3 实现
• jqeury 实现

测试结果如下（CSS3 左， jquery 右）：

由于 jquery 中，脚本运行占据了一定的CPU 时间，而 css3 几乎全部开销在页面重绘上。 这样看来 css3 具有更好的性能。

测试回流+重绘

接下来这两个 DEMO 效果是移动 DIV 的位置，这会导致浏览器触发 Rendering（回流），然后再进行重绘：

• CSS3 实现
• jquery 实现

测试结果如下（CSS3 左， jquery 右）：

可以看到，两者没有太打的区别。

结论

通过上面两个简单的测试，可以得出一个结论，CSS3 同 jquery 在处理元素几何属性发生变化的动画时，表现相当；但是在处理元素特性变换时 CSS3 的性能要好。

CSS3 动画库

可以通过Animate.css 动画库获取各种动画特效，并且可以自定义需要的动画效果列表。用 CSS3 动画来代替 jquery UI 可以大大的提升网页性能，如果你不打算考虑IE9-， 呵呵。

动画库测试 DEMO：http://codepen.io/CodingMonkeyzh/pen/gpLdPW