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

问题描述

我不知道有没有用CSS过渡的表现有什么区别与任何不同的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过渡都应该被硬件加速。

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.

更新

我一直使用Scriptaculous的 Effect.Fade 5条不同的DIV（每片含在某些行画布）尝试。做同样的事情用CSS转换，我看到在性能上完全没有区别。两人都是非常流畅的一个DIV /帆布，但都是很慢，当我做一次超过2

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.

我在的Safari 4，5（OSX）试过这种的谷歌浏览器5 和火狐3.7 pre 的。全线相同的结果。

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

在回答UpHelix的反应，你不只是限于悬停等。您可以通过改变任何可转换的风格。例如，在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动画虽然有限。在大多数情况下，他们真的只是工作，关闭：悬停事件。使用JavaScript，你可以在任何情况下执行的动画：点击，鼠标悬停，鼠标移动，鼠标移开， 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屋！