一个测试CSS不同方式制作动画的性能问题示例程序。观看效果链接 http://1.cssanimation.sinaapp.com/
目前WEB页面做动画的方式大的分两种 1.JS间隔时间不断修改元素属性值，这也是CSS3出来前常用的做法，貌似也是唯一的做法。 2.CSS3出来之后支持动画了。
大体的思路分这两种。要是各样功能组合细分就可以分出许多类来。本文主要介绍WEB页面做动画的一些方式以及性能分析。
我们的例子界面如下。 1.用好多个小方块的移动来测试不同方式动画的性能。 2.右边几个功能按钮。其中有个阻塞按钮，利用一个空循环阻塞主线程来测试不同效果。 3.画面主要是许多个小方块无规则的平移，没有使用其他类似缩放，旋转的动画等。主要是为了使代码更简单写也更简单理解。
我的这个例子全在chrome上实现的，其他浏览器可能有问题。最好使用chrome来测试，并且有些特性的测试（阻塞）其他浏览器可能不支持。
......
制作过程中略，可参见http://www.cnblogs.com/laozhbook/p/cssAnimation.html
......
首先一个很重要的观点是，我们想CSS+JS来控制动画的性能，实际上我们能做的很有限。因为这个性能很大程度上取决于浏览器的实现。 我们使用不同的API，不同的用法是会使性能有所不同，但能做毕竟很少。并且做种还是要取决于浏览器如何解释并实现你写的代码。
总结上面的例子，我们做动画可以使用不同的做法，JS, animation, transition。我们可以组合属性，transform, transform3d。 大多组合上面的例子都有实例验证，以上无论用什么组合来实现，关键的是一下几点。 （JS） VS （animation 或 transition）： JS占用UI主线程，而后者不用。 transform VS (属性) : transform的渲染不在UI主线程中，也就是它不会受到JS代码的影响（这个是比较新的版本才有的，还有其他浏览器可能要不支持）。 另外一点，改变属性可能会更多的引起浏览器的重绘。例如使用transform的缩放scale(2)和改变属性(height, width)相比，后者会引起浏览器的重绘。 transform VS transform3d : 后者可以让浏览器主动性选择GPU来渲染，也即是硬件加速。提高动画渲染效率。
明白了以上的要点，那么我们制作过程中选用哪种方式就心里有数了。其实对于普通动画要求不高的浏览器页面使用哪种方式都是OK的。 因为无论何种方式在PC版的浏览器跑都不是问题，你的需求肯定不会像我们上面的例子N多小方块一起动哪种。 但是如果是在移动终端跑的话就要注意了。我们的第一原则是尽量减少浏览器重绘，重绘是个比较耗时步骤。第二如果能用到transform3d提高性能则更好。 至于用不用JS来主动控制（类似第一例），这个关系到不是特别重要，因为整个动画过程中JS占的比重是很少的，例如仅仅调用JS修改一个元素的left, top是很快就可以完成的。 最终的性能关键还在于浏览器的渲染过程。当然你能不用理论上性能是好一点。但是用JS做动画却可以很方便的控制。