Menu
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 what are some features that CSS animations has that JQuery doesn't and vice versa. What are the pros and cons of each? Does one have better functionality? How efficient is each?
412
The fact is that, in most cases, the performance of CSS-based animations is almost the same as JavaScripted animations — in Firefox at least. Some JavaScript-based animation libraries, like GSAP and Velocity. JS, even claim that they are able to achieve better performance than native CSS transitions/animations.
What's the difference? In a nutshell, CSS uses your graphic card to process the transition, where as using jQuery uses your main processor. However jQuery is generally more backwards compatible than CSS. That said, CSS transitions will revert to jQuery if the browser doesn't support CSS transitions.
With jQuery, you can create custom animations.
jQuery slows it down. Why? Because — despite jQuery being tremendously powerful — it was never jQuery's design goal to be a performant animation engine: jQuery cannot avoid layout thrashing due to its codebase that serves many purposes beyond animation.
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.
172
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/
21
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
