使用CSS3动画属性时,为什么Firefox中的CPU使用率如此之高？

Question

今天我将使用CSS制作一些关键帧动画.我正在使用以下CSS:

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

但是有一个很大的问题,我不知道我的代码是否存在问题,或者它是否是Firefox问题.相比之下,这些动画的10倍:

• Safari:CPU使用率为12.8%.
• Firefox:超过70%的CPU使用率.

我在这里上传了我的网页:

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

Firefox不适合CSS动画吗？有人知道这个的原因吗？我应该想到另一种做动画的方法吗？

Answer 1

CSS 动画应该是硬件 (GPU) 加速的。

查看这个非常邪恶的示例http://ie.microsoft.com/testdrive/Performance/Chalkboard/ 并比较 IE10（默认情况下本机 HWA）和其他浏览器（当前默认情况下没有 HWA）的性能。然后 - 启用 HWA，然后看看其他浏览器第二次的表现好多少（但仍然比 IE10 差）。

在所有目标浏览器默认支持 HWA 之前，您不应依赖动画来实现非必要功能。禁用它们的动画可能是个好主意。