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 を有効にして、2 回目に他のブラウザのパフォーマンスがどの程度向上するかを確認します (それでも IE10 よりは劣ります)。

すべてのターゲット ブラウザがデフォルトで HWA をサポートするまでは、重要でない機能をアニメーションに頼るべきではありません。そして、それらのアニメーションを無効にすることはおそらく良い考えです.

于 2012-12-08T17:23:11.663 に答える