I read something a while ago that said that CSS animations are faster than JS animations. Having used jQuery to do some animations I can see why some would say this, as jQuery animations are sometimes buggy and slow. What I would like to know however, is whether there is any hardcore truth in the argument?

I read something a while ago that said that CSS animations are faster than JS animations. Having used jQuery to do some animations I can see why some would say this, as jQuery animations are sometimes buggy and slow. What I would like to know however, is whether there is any hardcore truth in the argument?

• javascript
• jquery
• css
• performance
• animation

2 Answers 2

There is a mon misconception that CSS animations are faster than JS animations because of all the highfalutin buzz-words used whenever the topic is brought up. CSS animations are however much faster and more stable than jQuery animations, which is where a lot of people get this idea from. If you take a look at the GreenSock library for JS (the name should ring bells to old Flash WebDevs :v), it is considerably faster than jQuery, and more than a match for CSS animations.

If you take a look at this website and scroll down to the 'Performance parison' section, you have a stress test that is indeed the basis of all of what I just said. I ran the test on a machine that has an Intel Core i7 3930K 3.2GHz processor and 8GB of RAM (Cannot tell what GPU).

When running the test, make sure to set the dots to 3000 and run tests on all three engines.

• The jQuery engine could only render a single dot
• The GreenSock engine was by far the most fluid
• The CSS engine was good, but didn't seem as fluid as the GSAP engine

Obviously, should anyone disagree with the tests and information given, please state with references and data as to why you disagree

I was recently studying this problem and found that there is now more nuance to the answer.

JS animation libraries predominantly use requestAnimationFrame, which prevents them from taking advantage of hardware acceleration.

In practice, this means that even if your animation uses only transform and opacity there will still be cpu work on every frame.

If your CPU is throttled, then this will cause JS animations to be slower than CSS ones. There is a new animation API (WAAPI) that can be hardware accelerated but most of the mainstream animation libraries don't use it just yet.

I discovered this while creating a blog post paring different animated sidebars.

• This subheading pares the same animation with CSS, requestAnimationFrame (framer-motion), and WAAPI (motion-one).
• This article was really helpful because the author piled a list of what animation types can be hardware accelerated.