what's faster? CSS3 transitions or jQuery animations?

Question

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

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?

Answer 1

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).

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.

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.

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

Answer 2

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).

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

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.

Answer 3

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.

A test here along 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.

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.

Answer 4

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

Reason can 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.

Answer 5

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/

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

Answer 6

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...

Answer 7

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.

Answer 8

CSS animations will almost always be faster.

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.

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

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

Answer 9

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

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.

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

Answer 10

CSS3 Transitions should be faster because they are native to the browser.