Is there any advantage to using CSS animations over jQuery animations? (performance, or otherwise)

Question

I mean, CSS animations are cool, but CSS3 compliance is annoyingly un-standard. but, ignoring all the issues with browsers and their inability to be up-to-date with the late

Answer 1

the best advantage is that it works very smoothly in iPad, iPhone, Android as well as in Safari mac due to hardware acceleration. jquery animations are not smooth on mobile devices. In future CSS animations would get buttery smooth as they are standard but jquery would remain the same. It is more future proof to use these

Answer 2

As a general rule of thumb, whenever JavaScript can be avoided and the same result achieved, it should be avoided.

It's always preferred to use the native browser abilities as it will usually be better performance-wise, plus it will generally look better.

Additional points:

• jQuery animations are not real animations, they are faked, while the native CSS3 browser animations are in fact, animations. As a result native CSS3 animations can be accelerated by the GPU, whereas jQuery animations cannot.
• Do note that not all browsers support CSS3 animations/transitions. You would probably want to test if the browser supports it, and act accordingly.

Answer 3

CSS animations have the benefit of potentially being hardware accelerated. Here's a demo of Scripty2 (I know, it's not jQuery - but same principles) that demonstrates this very well.

http://scripty2.com/hardware-acceleration/

Answer 4

But css animation are not suported by every browser, it's an important issue depending of your public.

Answer 5

CSS animations can be accelerated by the GPU, whereas Javascript animations aren't. If You know without a doubt that your user base will have support for the css version of your animations, it makes a lot of sense to choose css.

In the case that you need to support older browsers, javascript is the right call.

Answer 6

To all the people who think Javascript is better for browsers that are older, that's not necessarily true. Thinking about Andy Clarke's take on this, it seems like it's easier to tell an elegant story with good, accessible fallbacks using solid semantic markup and CSS3 than it is with Javascript.

http://forabeautifulweb.com/blog/about/its_a_mad_mad_mad_mad_manimation/