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 latest W3C,

Is there some sort of performance advantage over jQuery animations?

Why are they being implemented?

Answer 1

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 2

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 3

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.