CSS转换与JS动画包的性能 [英] Performance of CSS Transitions vs. JS animation packages

问题描述

我想知道使用CSS Transitions与任何JavaScript动画库的性能有什么区别吗？ （ script.aculo.us ， scripty2 ， jsAnim MooTools ， $ fx 等）。

I'm wondering is there any difference in performance of using CSS Transitions vs. any of the various JavaScript animation libraries? (script.aculo.us, scripty2, jsAnim, MooTools, $fx, etc).

已在Safari 和 Chrome 中尝试过各种测试，但我实际上看不到任何差异。我认为CSS Transitions应该是硬件加速的。

I've tried various tests in Safari and Chrome but I don't actually see any difference. I thought that CSS Transitions were supposed to be hardware accelerated.

更新：

我已经尝试在5个不同的DIV（每个包含一些线条的画布）上使用Scriptaculous' Effect.Fade 。使用CSS转换完全相同的事情，我看到绝对没有性能差异。两个都非常顺利一个DIV / Canvas，但是当我一次做两个以上的时候，这两个都很慢。

I've tried using Scriptaculous' Effect.Fade on 5 different DIVs (each containing a canvas with some lines). Doing the exact same thing using CSS transitions, I see absolutely no difference in performance. Both were very smooth with one DIV/Canvas, but both are very slow when I do more than 2 at a time.

我在 4，5（OSX），Google Chrome 5和 FireFox 3.7pre 。相同的结果。

I've tried this in Safari 4, 5 (OSX), Google Chrome 5 and FireFox 3.7pre. Same results across the board.

在回答UpHelix的回应，你不仅限于 hover 等。您可以通过更改任何可转换样式来触发转换。例如，在JavaScript中设置元素的不透明度（在指定 transitionPropery 和 transitionDuration 元素）。

In answer to UpHelix's response, you're not simply limited to hover, etc. You can trigger a transition by changing any transitionable style. For instance, set the opacity of an element in JavaScript (after, you've specified the transitionPropery and transitionDuration for that element).

推荐答案

是的有区别，CSS是快得多。这可能很难看到，直到你得到许多运行在同一时间或更多的他们做。 CSS动画是有限的。在大多数情况下，它们只能处理：hover 事件。使用JavaScript，您可以在任何事件执行动画：点击， mouseover ， mousemove ， mouseout ， keyup ， keydown 等等。

Yes there is a difference, CSS is much faster. It may be difficult to see until you get many running at the same time or the more they do. CSS animations are limited though. In most cases they really only work off the :hover event. With JavaScript you can perform animations at any event: click, mouseover, mousemove, mouseout, keyup, keydown, etc.

在我看来，jQuery是JavaScript动画的最佳选择。请参见 jQuery演示

In my opinion jQuery is by far the best for JavaScript animations. See jQuery Demos

这篇关于CSS转换与JS动画包的性能的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！