Are CSS animations faster than JS animations?

Question

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?

Answer 1

There is a common 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 comparison' 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