CSS Transitions与JS动画包的性能

Question

我想知道使用CSS Transitions与任何各种JavaScript动画库的性能有什么不同吗？(script.aculo.us,scripty2,jsAnim,MooTools,$fx,等等).

我在Safari和Chrome中尝试了各种测试,但实际上我没有看到任何差异.我认为CSS Transitions应该是硬件加速的.

---

更新:

我尝试Effect.Fade在5种不同的DIV上使用Scriptaculous (每种DIV都包含一些带有一些线条的画布).使用CSS过渡做同样的事情,我看到性能完全没有区别.两个DIV/Canvas都非常流畅,但是当我一次超过2个时,两者都很慢.

我在Safari 4,5(OSX),谷歌Chrome 5和FireFox 3.7pre中尝试过这个.全面的结果.

在回答UpHelix的回复时,您不仅限于hover等等.您可以通过更改任何transitionable样式来触发转换.例如,在JavaScript中设置元素的不透明度(之后,您已为该元素指定了transitionProperyand transitionDuration).

Answer 1

是的,有区别,CSS更快.可能很难看到,直到你让许多人同时跑步或者他们做得越多.CSS动画虽然有限.在大多数情况下,他们真的只能参加:hover活动.:使用JavaScript你可以在任何情况下执行的动画click,mouseover,mousemove,mouseout,keyup,keydown,等.

在我看来,jQuery是迄今为止JavaScript动画的最佳选择.请参阅jQuery演示

Answer 2

添加到Uphelix的(正确的)答案:JavaScript是一种解释型语言,浏览器的JS引擎必须在运行时解析并执行每条指令(我知道存在JS编译器,如V8(在Chrome中使用),但是原则保持不变).

另一方面,浏览器可以本地实现CSS转换,例如在C/C++或其他方面.此代码将编译为机器语言.

如果CSS转换是否是硬件加速,则取决于浏览器使用的技术,浏览器运行的平台等.

Answer 3

您会注意到移动浏览器（iPhone、Android 等）上的差异。