学这么久CSS和JavaScript其实我自己都没考虑过这个问题,有时候问题来了就很自然的解决了,大多时候都是用的js去完成动画特效 ,但是后头一思考,通用的动画用C3好像也能实现,那到底用什么方法实现好?
网上查了一下相关文章并不多,总结一下如下:
我们都知道导致JavaScript效率低的两大原因：操作DOM和使用页面动画.
通常我们会通过频繁的操作 DOM的CSS来实现视觉上的动画效果，刚巧导致js效率低的两个因素都包括在内了。在频繁的操作DOM和CSS时，浏览器会不停的执行dom重排和图画重绘， 在PC版本的浏览器中，因为浏览器可用的内存比较大，用户肉眼几乎看不见页面动画产生的repaint和reflow，所以人们几乎(请注意，我是说几乎)无需过多的考虑动画带来的性能问题.
但在移动设备上可大有不同，移动设备分配给浏览器(指内置浏览器)的内存可没有PC版本的浏览器内存可观，据说 iPhone分配给safari的内存只有10M .
CSS3动画相比较JS模拟动画的好处：
前端都知道CSS3提供了一大批新的特性，包括2D＼3D动画特性，其它特性不在本篇讨论范围内，我们此刻讨论一下CSS3的动画特性。用CSS3动画替代JS模拟动画的好处：
1. 不占用JS主线程；
2. 可以通过浏览器调用硬件加速；
3. 浏览器可对动画做优化（元素不可见时不动画，减少对FPS的影响）。
当然也有不好用的地方,动画的可操控性没有JS写的好.
在一篇测试文档中我们发现css动画效率不是绝对高于js动画,理由如下:(注意第三点)
1. CSS 3D动画在js中无法实现
CSS3的3D动画是CSS3中非常强大的功能，因为它的工作原理是在一个三维的空间里，因此js是无法模拟出像CSS3那样的3D动画，当然这个3D动画的实际应用场景是否很广，值得思考……
2. CSS 2D矩阵动画效率高于js利用margin和left,top模拟的矩阵动画
CSS3的2D动画是指是2D矩阵Transform变化，比如缩放＼变形＼x轴＼y轴，js当然是不能做变形动画的。就拿坐标动画来说，经过我们的测试 发现使用CSS3的transform做translateXY动画比js中的position left，position right快了近700mm!而且视觉上也比js动画流畅很多。
3. CSS3其它常规动画属性的效率均低于js模拟的动画
常规动画属性在这里是指：height，width,opacity,border-width,color…..
我们曾在Android HTC中测试将一个DOM元素从height:0改变为height:100，我们使用了jQuery animate和CSS3的transition以及animation，结果表明：CSS3的tansition和animation均慢于 jQuery animate 500mm！其它的常规动画属性均慢于jQuery animate 400-500mm!。
总结
css在动画方面一直在完善和添加,至于采用js动画还是css3动画，需要开发者根据不同的需求做出不同的抉择，但应该遵循一个原则是： 如果需要做2D动画，尽量使用CSS3的transition或animation。