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

/

Scroll down to performance parision. 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:

/

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 parable frameworks)?

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

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

Scroll down to performance parision. 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./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 parable frameworks)?

• javascript
• jquery
• performance
• css
• animation

• obviously the speed of CSS is always faster than js, 'cause CSS is a browser built-in library, but if you want cross-browser support, then js is the way to go – Amin Jafari Commented Sep 24, 2014 at 7:19
• Look into the page I posted. He tested GSAP vs CSS3 and at this point it was up to 3 times faster than CSS3. – Frederik Witte Commented Sep 24, 2014 at 7:34
• I didn't know what GSAP was until now, sounds amazing!! <3 – Amin Jafari Commented Sep 24, 2014 at 7:50
• I dare you visually see any difference. – frenchie Commented Sep 24, 2014 at 14:07

3 Answers 3

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.

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.

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./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./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 plex 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.