Use Javascript or CSS3 for animations?

Question

I have been wondering what's better for animation in terms of performance - Javascript or CSS3. On this page you have a comparision between GSAP, jQuery and CSS3:

http://css-tricks.com/myth-busting-css-animations-vs-javascript/

Scroll down to performance comparision. Now my Question is the following:

Will CSS3 sooner or later be faster than Javascript(GSAP in this case)? So should we program animations with CSS3 or still with Javascript?

Update: Another website:

http://greensock.com/transitions/

As it looks right now, GSAP is faster than CSS3 in most ways, but in 3D transforms CSS3 is faster.

The question now still is: Will CSS3 be faster than GSAP(or other comparable frameworks)?

Answer 1

CSS3 animations are faster and smoother than JavaScript animations because they can be optimised and potentially hardware accelerated by the browser/GPU. JS animations on the other hand are usually a little less smooth because each frame of the animation has to be explicitly interpreted an rendered.

Also, JS animations are used mainly for older browsers which don't support CSS3, which is relatively new.

Answer 2

Here's an approximation of how animations work:

• CSS3: "Please transition this as smoothly as reasonably possible."

• JavaScript (naive): "Okay, so first you move here, then you move here, then here... are you keeping up?" [Browser:] "MAKE UP YOUR MIND!"

• JavaScript (delta timing): "Okay, move here. Damn, you're slow. Okay, move over here so it looks like you're not lagging."

• jQuery: "I don't care how it's done, just do it. Bye!"

The winner, in my opinion, is CSS3.

Answer 3

It seems that there are only four css properties that get real hardware acceleration as Paul Lewis and Paul Irish explain here: http://www.html5rocks.com/en/tutorials/speed/high-performance-animations/ (very interesting read!). Those are: position, scale, rotation and opacity All other css properties get nothing in most browsers and might therefore be slow.

So yes, some CSS animations are already super smooth and the rest will get faster in time. Especially on mobile devices. (More technical stuff in the other answers)

But soon after that happens, libraries like GSAP and jQuery will (under the hood) change their animation method anyway. They could even choose the method that is faster depending on the device the site is running on.

(For example: You can already use the transit plugin for jQuery to use CSS3 animations from jQuery. http://ricostacruz.com/jquery.transit/)

So:

Will CSS3 be faster than Javascript?

Yes. But:

Should we program animations with CSS3 or still with Javascript?

That is a diffent story and depend on your needs.

If you animate a little hover effect using opacity: The CSS3 is probalby your way to go. Easy, clean, fast.

For complex animations, different interactions, etc. you will need to use JS which also gives you the flexibility of choosing the animation method later on. Especially GSAP is ridiculous powerful and easy to write.