7

今天我打算用 CSS 制作几个关键帧动画。我正在使用以下 CSS：

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

不过有一个大问题，我不知道是我的代码有问题还是 Firefox 有问题。作为比较，在这些动画中的 10 倍上：

  • Safari：12.8% 的 CPU 使用率。
  • Firefox：超过 70% 的 CPU 使用率。

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

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

Firefox 不适合 CSS 动画吗？有人知道这是什么原因吗？我应该考虑另一种制作动画的方法吗？

4

1 回答 1

4

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

看看这个非常邪恶的例子http://ie.microsoft.com/testdrive/Performance/Chalkboard/ 并比较 IE10（默认为原生 HWA）和其他浏览器（目前默认没有 HWA）的性能。然后 - 启用 HWA，看看其他浏览器的第二次性能好多少（但仍然比 IE10 差）。

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

于 2012-12-08T17:23:11.663 回答