CSS3 animations and performance: are there any benchmarks?

Question

Every time I visit a page with CSS3 animations, my notebook becomes noisy (gives me a signal that it does some heavy job on there). I wouldn't care myself if at least resulting animations were smooth enough. But they are not. What I get as a result on my 2.4 GHz Core 2 Duo with 8GB of RAM and dedicated NVIDIA GeForce 320M (not much, but should be enough for some css, no?...) is some jerky, randomly flickering, in some cases having weird artifacts... "animation", that is often worse then it's JS equivalent...

Has anyone done any comparisons of JS vs CSS animations? Or benchmarking of proposed CSS3 goodies for real-world usage (for example how many of them can be on the page simultaneously without serious hang, etc)? Are there any best practices (like - do this, do not do that, or your browser will crawl - and such)?

Answer 1

I've done a few project with CSS3 transitions and Jquery .animate() fallback when CSS3 is not supported.

I've three testing computers besides my own :

• a 6+ years laptop (running XP, Athlon 1800+ and 768Mo of Ram)
• a 3 years laptop (running Crappy Vista and a dual Core Intel CPU with 2Go of Ram)
• a franken desktop (a few OS installed with a P4 and 1Go of ram)

What I observed is that most of the times, CSS3 performs better.

What I mean by "performs better" is only that it "feels better" : I did not try to benchmark the perfs, nor to apply a scientific testing method, and my observation should not be taken for more than an empiric feel. Also note that I mainly use CSS3 transitions and not CSS3 Animations (ie with keyframes).

However, "better" does not here mean "always good". On the older computers, Javascript and CSS3 are equally laggy. If your site is JS or CSS3 heavy, IEs before version 9 are always a poor experience, IEs before version 8 always a true nightmare. Firefox before v4 is better but far than perfect on older computers.

In all case, CSS3 must be correctly applied : e.g I found that fading a div to opacity: 0 without setting display:none when finished is always a bad idea... CSS3 transition are quite new that no real best practices exists, it's trial and error for now.

On modern mobile devices (I own a few IOS, Android and BBOS devices), the CSS3 is always way better than Javascript : on an iPad 1, a simple $('img').fadeOut() can be quite ugly when the CSS3 transition is clean.

So, to conclude, my personal (and limited) experience tells :

• css3 is often better than Js, especially for modern mobile devices
• though both are bad on poor computers/browser combination when overused
• as usual, it depends on your users. If they have state of the art Macbooks, you can use a lot of animation without fear. If they are poorly equiped, animations could seriously hinder their browsing experience.
• I think the best is to do CSS3 transitions with a Jquery fallback if not supported, and keep 'em simple (ie not animating four properties on three different elements at once)

I hope it helps.

Answer 2

CSS3 uses GPU acceleration in some browsers, which means if you got a great GFX card, will result in smooth, fast animations. Where CSS/JQ uses your memory.

So i don't really think it's possible to a hands down benchmark test comparison.

About how many animations you can use, with the browser being updated so frequently and the hardware being a factor, it's going to be very hard to do such "usage guides".

Haven't seen any for JS either :)

For more on GPU acceleration see:

http://www.html5rocks.com/en/tutorials/speed/html5/#toc-hardware-accell

There are some great articles on the subject though:

http://www.netmagazine.com/opinions/css3-vs-javascript

http://www.whatcreative.co.uk/blog/tips/the-benefits-of-css3-vs-jquery/