Animations: CSS3 vs Jquery

This blog will throw some light on the animation technology and places the animation technology in the ring arena of different performances where in, its different attributes will be checked and evaluated.

CSS animations are definitely better from an optimization perspective.

They’re run on the GPU so the frame rate is much higher than that of JavaScript animations. When it comes to CSS animations they also have the advantage of not causing reflows and redraws unlike modifying elements via JavaScript would.

The downside to CSS animations and transitions is they’re somewhat more simplistic (but probably cover most use cases), JavaScript has the advantage of allowing you to customize your animations a little more.

It’s a trade-off you need to decide on a project-by-project basis.

Only certain CSS3 animations are hardware accelerated (like 3d transforms and opacity – in general the ones that don’t affect document flow) and different browsers handle them differently. Despite that hype around CSS3 abilities, they aren’t yet ready for professional-grade animations on large scalable projects. For simple things and hover states – CSS3 is the winner, we can’t even argue on that.

For bigger projects, it may easily turn out that you need to write very complex animations -> that’s the moment when code organization is a key!

With CSS3 it’s hardly impossible to group your animations in logical pieces that you can then easily manage (point #1) by just calling methods and callbacks on them.

CSS3 transitions don’t work in older browsers. What’s more – every browser engine handles them differently (and adds its own bugs to your app). With few animations on your page it’s probably easier to check whether everything runs smoothly, but it may become impossible to maintain very soon once you go for a bigger project. JavaScript solutions provide you with abstraction layer that you are using. You don’t have to worry about browser-specific behaviors as that’s the part where libraries are doing their jobs.

CSS animations are definitely better from an optimization perspective.

They’re run on the GPU so the frame rate is much higher than that of JavaScript animations. When it comes to CSS animations they also have the advantage of not causing reflows and redraws unlike modifying elements via JavaScript would.

I would also like to add it is possible to animate elements at relatively high frame rates using request Animation Frame in JavaScript instead of older ineffective methods like set Timeout. If you can use CSS animations and transitions, you should, because from a performance perspective they use pretty much none of your CPU, are optimized for GPU rendering (modern GPU’s are incredibly powerful).

The downside to CSS animations and transitions is they’re somewhat more simplistic (but probably cover most use cases), JavaScript has the advantage of allowing you to customize your animations a little more.

It’s a trade-off you need to decide on a project-by-project basis.

 

, , ,
Previous Post
Graphic Design as a Career
Next Post
How to Code (Noob Edition)

Leave a Reply

Your email address will not be published. Required fields are marked *

Fill out this field
Fill out this field
Please enter a valid email address.
You need to agree with the terms to proceed

Menu