Why is the CPU usage so high in Firefox when using CSS3 animation property? [closed]

Question

Today I was going to make a couple of keyframe animations using CSS. I'm using the following CSS:

-webkit-animation: ballanim 5.6s infinite;
     -o-animation: ballanim 5.6s infinite;
        animation: ballanim 5.6s infinite;

There is a big problem though, and I don't know if it's a problem with my code or if it is a Firefox problem. For comparison, on 10X of these animations:

• Safari: 12.8% CPU usage.
• Firefox: over 70% CPU usage.

I uploaded my webpage here:

http://hkwh01.99k.org/test/services.html

Is Firefox not suitable for CSS animations? Does anybody know the reason for this? Should I think of another method to do animations?

Answer 1

CSS animations are supposed to be hardware (GPU) accelerated.

Look at this really evil example http://ie.microsoft.com/testdrive/Performance/Chalkboard/ and compare performance of IE10 (native HWA by default) and other browsers (no HWA by default, currently). Then - enable HWA, and see how much better other browsers perform second time (but still worse than IE10).

Until the time, when all your target browsers will support HWA by default, you should not rely on animations for non-essential features. And its probably a good idea to disable animations for them.