CSS Animations vs JQuery Animations

Question

I almost always use JQuery animations for any web projects I work on, but I was wondering how CSS animations are different. I know the syntax is different (obviously), but w

Answer 1

CSS3 animation performance is competitive with JavaScript, but not necessarily superior. This page lets you test multiple browser animation techniques and see the actual differences.

https://greensock.com/js/speed.html

CSS3 animations run in a separate thread than JavaScript, so its very non-blocking. So CSS3 is best if your application has some load to it.

http://www.phpied.com/css-animations-off-the-ui-thread/

CSS3 animations are also often hardware accelerated (the animation runs on the GPU instead of the CPU boosting performance). But so are many JavaScript animation tools.

Thats basically it technically. Coding style wise, they have some big differences too. The triggering of CSS3 animations is generally through the adding and removing of dom classes from JavaScript. So the behavior of your component ends up living between 2 files and in 2 languages. This can all be worked around, but it can make code harder to reason about.

So if you choose to go with CSS3 animations, I recommend not doing so in css, but using a JavaScript library that lets you store your CSS3 animations in JavaScript. Or you can choose a JavaScript only animation library like GreenSock. Either way I recommend storing animations in JavaScript for workflow and simplicity of understanding.

Answer 2

I think the main pro is that CSS animations are native. This means that they are going to call compiled code inside the browser and probably make use of any hardware acceleration that is available. This means that CSS3 animations are going to be faster and use less memory.

Here's an interesting post on the subject from the developers of the Opera browser: https://dev.opera.com/articles/css3-vs-jquery-animations/