Use Javascript or CSS3 for animation?

Question

I was wondering what is best for animation in terms of performance - Javascript or CSS3. On this page, you compare GSAP, jQuery, and CSS3:

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

Scroll down to compare performance. Now my question is this:

Sooner or later CSS3 will be faster than Javascript (GSAP in this case)? So do we have to program animations using CSS3 or even with Javascript?

Update: another site:

http://greensock.com/transitions/

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

Now the question remains: will CSS3 be faster than GSAP (or other comparable frameworks)?

Answer 1

Here's an approximation of how the animation works:

• CSS3: "Please rearrange it as smoothly as possible."

• JavaScript (naive): "Okay, so first you move here, then you move here, and then ... do you want?" [Browser:] "MAKE YOUR MIND!"

• JavaScript (delta synchronization): "Okay, move here. Damn, you are slow. Okay, move here, so it looks like you are not falling behind."

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

The winner, in my opinion, is CSS3.

Answer 2

CSS3 animations are faster and smoother than JavaScript animations because they can be optimized and potentially hardware accelerated by the browser / GPU. JS animation, on the other hand, is usually a little less smooth because each frame of the animation must be explicitly interpreted by the rendering.

In addition, JS animations are mainly used for older browsers that do not support CSS3, which is relatively new.

Answer 3

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

So, some CSS animations are already super-smooth, while others will be faster in time. Especially on mobile devices. (Other technical questions in other answers)

But soon after that, libraries such as GSAP and jQuery (depending on the hood) will still change their animation method. They may even choose a method that is faster depending on the device on which the site is running.

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

So:

Will CSS3 be faster than Javascript?

Yes. But:

Should we program the animation using CSS3 or still with Javascript?

This is a different story and depends on your needs.

If you are animating a small hover effect using opacity: CSS3 is your way. Easy, clean, fast.

For complex animations, different interactions, etc. you will need to use JS, which will also give you the flexibility of choosing an animation method later. Especially GSAP is ridiculously strong and easy to write.