每次我访问一个带有CSS3动画的页面时，我的笔记本就会变得嘈杂(给我一个信号，它在那里做了一些繁重的工作)。我不会在意最终的动画是否足够平滑。但事实并非如此。我在2.4 GHz酷睿2双核，8GB内存和专用NVIDIA GeForce 320M上得到的结果是(不多，但对于一些css应该足够了，不是吗?…)是一些不稳定，随机闪烁，在某些情况下有奇怪的伪影…"animation"，这通常比JS更糟糕…
有没有人做过JS和CSS动画的比较?或者对实际使用的CSS3功能进行基准测试(例如，有多少功能可以同时出现在页面上而不会出现严重挂起等)?有没有什么最佳实践(比如——做这个，不要做那个，否则你的浏览器会抓取——等等)?
我已经做了一些项目与CSS3过渡和Jquery .animate()回退时，CSS3不支持。
除了我自己的电脑，我还有三台测试电脑:
- 6年以上的笔记本电脑(运行XP, Athlon 1800+和768Mo Ram)
- 3年笔记本电脑(运行蹩脚的Vista和双核英特尔CPU与2Go内存)
- 一个弗兰肯桌面(安装了P4和1Go内存的几个操作系统)
我观察到的是，大多数时候，CSS3表现得更好。
我所说的"性能更好"只是"感觉更好":我没有尝试对性能进行基准测试，也没有应用科学的测试方法，我的观察不应该被视为经验之谈。另外请注意，我主要使用CSS3过渡，而不是CSS3动画(即关键帧)。
然而，"更好"在这里并不意味着"总是好的"。在旧电脑上，Javascript和CSS3同样滞后。如果你的站点是JS或CSS3为主的，那么版本9之前的ie体验总是很差，版本8之前的ie总是一个真正的噩梦。v4之前的Firefox更好，但在旧电脑上远远不够完美。
在所有情况下，CSS3必须正确应用:例如，我发现，褪色的div透明度:0没有设置显示:none完成时总是一个坏主意…CSS3的过渡是相当新的，没有真正的最佳实践存在，它现在是试验和错误。
在现代移动设备上(我拥有一些IOS, Android和BBOS设备)，CSS3总是比Javascript好得多:在iPad 1上，当CSS3转换干净时，简单的$('img'). fadeout()可能会非常难看。
总之，我的个人(和有限的)经验告诉我:
- css3通常比Js更好，特别是对于现代移动设备
- 虽然当过度使用时，两者在糟糕的计算机/浏览器组合上都很糟糕 像往常一样，这取决于您的用户。如果他们有最先进的macbook，你可以毫无畏惧地使用大量动画。如果设备不完善，动画可能会严重影响他们的浏览体验。
- 我认为最好的是做CSS3过渡与Jquery后退，如果不支持，并保持他们简单(即不动画四个属性在三个不同的元素一次)
我希望它有帮助。
CSS3在一些浏览器中使用GPU加速，这意味着如果你有一个很棒的GFX卡，将会产生流畅，快速的动画。CSS/JQ使用你的内存。
所以我真的认为不可能轻易地进行基准测试比较。
关于你可以使用多少动画，浏览器更新如此频繁，硬件也是一个因素，做这样的"使用指南"将是非常困难的。
还没有看到任何JS:)
有关GPU加速的更多信息，请参阅:
http://www.html5rocks.com/en/tutorials/speed/html5/toc-hardware-accell
关于这个主题有一些很棒的文章:
http://www.netmagazine.com/opinions/css3-vs-javascript http://www.whatcreative.co.uk/blog/tips/the-benefits-of-css3-vs-jquery/在一些项目的生产环境中使用css动画后，我不得不说这是相当痛苦的。
我还使用了我最喜欢的动画库TweenLite，我以前在Flash中使用过很多次，它已经为javascript和CSS重写了。
现在我对html5动画有了足够的经验，我可以肯定地说，TweenLite是最适合的工具。我曾经在我的web开发中使用css动画和过渡，并使用TweenLite作为旧浏览器的退路，但当我将css和TweenLite在现代浏览器中的性能进行比较时，TweenLite版本几乎总是最流畅的。
我运行这些测试是因为开发人员刚刚写的这篇文章:
http://www.greensock.com/transitions/GSAP利用了requestAnimationFrame并进行了超优化。它具有与css3相当的性能，并且在排序、控制、回调等方面具有更好的api。
选择的问题!我做了我的。
这是新的(从2012年12月)，由Greensock: http://www.greensock.com/js/speed.html
您可以在jQuery, YUI, Zepto, Mootools, Dojo, TweenJS和GSAP等框架上对css3动画进行基准测试和比较。