什么更快？CSS3 过渡还是 jQuery 动画？

what's faster? CSS3 transitions or jQuery animations?

提问by Moisés Olmedo

I'm working on an iPad HTML5 app and I've already implemented ontouch support to trigger events faster and I'm using jQuery to target the elements easier, but for the animations I'm using CSS3 transitions

我正在开发 iPad HTML5 应用程序，并且已经实现了触摸支持以更快地触发事件，并且我正在使用 jQuery 来更轻松地定位元素，但是对于动画，我使用的是 CSS3 转换

What do you think is faster? using jQuery animations since I already have imported the library or use CSS3 transitions when targeting elements with jQuery?

你认为什么更快？使用 jQuery 动画，因为我已经导入了库或在使用 jQuery 定位元素时使用 CSS3 转换？

回答by Ashish Gupta

According to this link, jQuery animation is much slower then css animation.

根据此链接，jQuery 动画比 css 动画慢得多。

Reasoncan be because jquery has to modify the props of the DOM element using timers and a loop. The CSS is part of the browser engine . which depends pretty much on hardware of system. You can also check that in profiling of Chrome or Firefox.

原因可能是因为 jquery 必须使用计时器和循环修改 DOM 元素的道具。CSS 是浏览器引擎的一部分。这在很大程度上取决于系统的硬件。您还可以在 Chrome 或 Firefox 的分析中检查。

回答by ddlshack

CSS animations will almost always be faster.

CSS 动画几乎总是更快。

A head to head comparison of CSS transitions and jQuery's animate. Rather than setting a timer to run repeatedly, transitions are handled natively by the browser. In my rather unscientific testing, transitions are always quicker, running with a higher frame rate, especially with high numbers of elements. They also have the advantage that colours can be animated easily, rather than having to rely on plugins.

CSS 过渡和 jQuery 动画的正面比较。与设置计时器重复运行不同，转换由浏览器本机处理。在我相当不科学的测试中，转换总是更快，以更高的帧速率运行，尤其是在元素数量较多的情况下。它们还具有可以轻松为颜色设置动画的优势，而不必依赖插件。

http://css.dzone.com/articles/css3-transitions-vs-jquery

http://css.dzone.com/articles/css3-transitions-vs-jquery

Related Question: Performance of CSS Transitions vs. JS animation packages

相关问题： CSS 过渡与 JS 动画包的性能

回答by Naftali aka Neal

CSS3 Transitions should befaster because they are native to the browser.

CSS3 Transitions应该更快，因为它们是浏览器原生的。

回答by Chandan Gorapalli

Its css3 its faster and consumes lesser memory and is smoother. CSS processor is written in C++ and native code executes very fast whereas jQuery (JavaScript) is an interpreted language and the browser can't predict JavaScript ahead in time. http://dev.opera.com/articles/view/css3-vs-jquery-animations/

它的 css3 速度更快，消耗更少的内存，更流畅。CSS 处理器是用 C++ 编写的，本机代码执行速度非常快，而 jQuery (JavaScript) 是一种解释性语言，浏览器无法及时预测 JavaScript。 http://dev.opera.com/articles/view/css3-vs-jquery-animations/

View the above link to know about the experiments held over CSS3 vs jQuery

查看上面的链接以了解关于 CSS3 与 jQuery 的实验

回答by Luke

This article (http://css-tricks.com/myth-busting-css-animations-vs-javascript/)does an excellent comparison of CSS transforms vs. jQuery animations vs. GSAP (another JavaScript library).

这篇文章 (http://css-tricks.com/myth-busting-css-animations-vs-javascript/)对 CSS 转换、jQuery 动画和 GSAP（另一个 JavaScript 库）进行了出色的比较。

CSS animations are significantly faster than jQuery. However, on most devices and browsers I tested, the JavaScript-based GSAP performed even better than CSS animations

CSS 动画比 jQuery 快得多。然而，在我测试过的大多数设备和浏览器上，基于 JavaScript 的 GSAP 的表现甚至比 CSS 动画还要好

So CSS transforms are faster than jQuery animations, but don't let this make you assume that CSS transforms are faster than JavaScript. GSAP shows that JavaScript can outperform CSS.

所以CSS 转换比 jQuery 动画快，但不要让这让你认为 CSS 转换比JavaScript快。GSAP 表明JavaScript 可以胜过 CSS。

回答by Lodder

CSS3 will be faster as it comes standard with the browser where as JQuery is another file that has to be loaded, however I have found that depending on the animation that JQuery can run a lot smoother. Sometimes it's also nice to experiment with pure Javascript now and again.

CSS3 会更快，因为它是浏览器的标准配置，而 JQuery 是另一个必须加载的文件，但是我发现根据动画，JQuery 可以运行得更流畅。有时，时不时地尝试纯 Javascript 也很好。

回答by Jashwant

From here

从这里

A head to head comparison of CSS transitions and jQuery's animate. Rather than setting a timer to run repeatedly, transitions are handled natively by the browser. In my rather unscientific testing, transitions are always quicker, running with a higher frame rate, especially with high numbers of elements. They also have the advantage that colours can be animated easily, rather than having to rely on plugins.

CSS 过渡和 jQuery 动画的正面比较。与设置计时器重复运行不同，转换由浏览器本机处理。在我相当不科学的测试中，转换总是更快，以更高的帧速率运行，尤其是在元素数量较多的情况下。它们还具有可以轻松为颜色设置动画的优势，而不必依赖插件。

A test herealong with this conclusion.

与此结论一起在此处进行测试。

Javascript animations based on timers can never be as quick as native animations, as they don't have access to enough of browser to make the same optimisations. These animations should be used as a fallback only in legacy browsers.

基于计时器的 Javascript 动画永远不会像原生动画一样快，因为它们无法访问足够的浏览器来进行相同的优化。这些动画只能在旧版浏览器中用作后备。

Also notice this,

还要注意这一点，

CSS3 animations are terriffic but do use a lot of your processor's power. There is no way to fine tune the animation with CSS3 the same way you can using a framework like jQuery. So, as long as CSS3 animations aren't CPU friendly you better stick with jQuery.

CSS3 动画非常棒，但确实使用了大量处理器的能力。无法像使用 jQuery 这样的框架一样使用 CSS3 微调动画。所以，只要 CSS3 动画不是 CPU 友好的，你最好坚持使用 jQuery。

回答by Andrew Odri

The Mozilla developer documentation raises some interesting points regarding CSS3 animation:

在Mozilla的开发者文档提出了关于CSS3动画一些有趣的点：

Letting the browser control the animation sequence lets the browser optimize performance and efficiency by, for example, reducing the update frequency of animations running in tabs that aren't currently visible.

让浏览器控制动画序列可以让浏览器优化性能和效率，例如，降低当前不可见的选项卡中运行的动画的更新频率。

WebKit (which powered Safari) also makes use of hardware accelerated compositing, which can have a much greater effect on performance than anything Javascript can do at this time. (I think this will change very soon though as more functions are added to manage calculations) This is because it will take advantage of dedicated hardware if it available to perform the calculations, rather than making it happen through a translated language like Javascript.

WebKit（为 Safari 提供支持）还利用了硬件加速合成，这对性能的影响比 Javascript 目前所能做的要大得多。（我认为这会很快改变，尽管添加了更多功能来管理计算）这是因为如果可以执行计算，它将利用专用硬件，而不是通过像 Javascript 这样的翻译语言来实现。

I am not 100% certain whether WebKit on the iPadis hardware accelerated; however it would stand to reason that because it is standardized and increasing in popularity, that this would only improve with time.

我不能 100% 确定iPad 上的WebKit 是否经过硬件加速；然而，有理由认为，因为它是标准化的并且越来越受欢迎，这只会随着时间的推移而改善。

回答by Aaron

If you're using jQuery/javascript animation with the canvas tag (which if I'm not mistaken still relies upon a timer... new to playing around with it though), then it gives you the advantage of hardware acceleration with javascript. If you're just looking to move something around when you hover then transitions work great. CSS transitions may run a little smoother but it's a trade off, you're relinquishing a ton of javascript control over the animation by using transitions. I like to keep style in CSS and behavior in JS - isn't that how it's supposed to work anyway? CSS transitions kind of broke that logic...

如果您使用带有 canvas 标签的 jQuery/javascript 动画（如果我没记错的话，它仍然依赖于一个计时器……虽然是新手），那么它为您提供了使用 javascript 进行硬件加速的优势。如果你只是想在悬停时移动一些东西，那么过渡效果很好。CSS 过渡可能运行得更流畅一些，但这是一个折衷，您通过使用过渡放弃了对动画的大量 javascript 控制。我喜欢在 CSS 中保留样式并在 JS 中保留行为 - 无论如何它不应该如何工作吗？CSS 转换有点打破了这种逻辑......

回答by vsync

Native is supposed to be faster, but if browser developers are sloppy (or lazy), they write bad code, which leads to poor results with CSS animations (or transitions).

Native 应该更快，但如果浏览器开发人员马虎（或懒惰），他们会编写糟糕的代码，这会导致 CSS 动画（或过渡）效果不佳。

Nowadays, jQuery has a plugin which overides the "animation" function with an "improved" one. see Velocity. I'm not getting into other ways to animate the DOM with javascript because it's outside the scope of this question.

如今，jQuery 有一个插件，它用一个“改进”的插件覆盖了“动画”功能。见速度。我没有进入使用 javascript 为 DOM 设置动画的其他方法，因为它超出了这个问题的范围。

So, as-is, jQuery is slower than CSS. also, CSS is easier to write because you already have the element style probably, so adding a few rules is easy, compared to a situation where you need to start writing JS somewhere and manage it..but for complex, heavy stuff, JS is faster, sadly.

因此，按原样，jQuery 比 CSS 慢。此外，CSS 更容易编写，因为您可能已经拥有元素样式，因此与您需要在某处开始编写 JS 并对其进行管理的情况相比，添加一些规则很容易……但是对于复杂、繁重的东西，JS 是更快，可悲。

A very good article about this exact question - http://davidwalsh.name/css-js-animation

关于这个确切问题的一篇非常好的文章 - http://davidwalsh.name/css-js-animation