87

いくつかの要素で次のキーフレーム アニメーションを使用します。

@keyframes redPulse {
    from { background-color: #bc330d; box-shadow: 0 0 9px #333; }
    50% { background-color: #e33100; box-shadow: 0 0 18px #e33100; }
    to { background-color: #bc330d; box-shadow: 0 0 9px #333; }
}
@-webkit-keyframes redPulse {
    from { background-color: #bc330d; box-shadow: 0 0 9px #333; }
    50% { background-color: #e33100; box-shadow: 0 0 18px #e33100; }
    to { background-color: #bc330d; box-shadow: 0 0 9px #333; }
}
.event_indicator {
    display: inline-block;
    background-color: red;
    width: 5px;
    margin-right: 5px;

    -webkit-animation-name: redPulse;
    -webkit-animation-duration: 1s;
    -webkit-animation-iteration-count: infinite;

    animation-name: redPulse;
    animation-duration: 1s;
    animation-iteration-count: infinite;
}

私のコンピューターでは、Chrome と Firefox の両方で CPU 使用率が約 40% になっています。それはアニメーションの現在の状態ですか (素晴らしいですが、今のところ使用できません)、それとも魔法のプロパティが不足していますか?

同じアニメーションで次のサンプルを確認できます: http://jsfiddle.net/Nrp6Q/

4

5 に答える 5

99

はい、ページにいくつかの無限ループ アニメーションがあるため、これは正常です。したがって、これらの要素がレンダリングされている間、CPU は継続的に作業を行っています。CPU 使用率を大幅に削減する「魔法の」プロパティがあります。

transform: translateZ(0);

これにより、要素が独自のレイヤーに合成され (ブラウザーをだまして 3D 変換を行うと思わせることにより)、ほとんどの場合、ブラウザーは GPU アクセラレーションを利用して、CPU の負担を軽減します。私にとっては、これにより約20％（ほぼ半分）削減されました。

このテクニックの詳細については、http: //ariya.blogspot.com/2011/07/fluid-animation-with-accelerated.htmlをご覧ください。

さらに、アニメーションのキーフレームが多いほど、負担も大きくなります。中央のキーフレームを切り取ってアニメーションを試してみると、CPU 使用率が大幅に (~10 ～ 12%) 低下することがわかります。

最後に、すべてのプロパティが同じというわけではありません。たとえば、background-color よりも、box-shadow の方がブラウザでスムーズにアニメーション化するのがはるかに困難です。translateZ(0) トリックを使用して、すべてのキーフレームをそのままにして box-shadow プロパティを削除すると、CPU 使用率はわずか 10 ～ 11% で推移しました。

これを言うのは苦痛ですが、無限ループ アニメーションの場合、現在のブラウザー アニメーションの状態では、アニメーション .gif は CSS3 よりもはるかに優れたパフォーマンスを発揮します。しばらくページ。

更新 2017:

この質問と回答への道をまだ見つけていない人には、とtranslate3d(0, 0, 0)同じ利点が提供されtranslateZ(0)ます。同時に設定するだけです。@Farsideのコメントはデモで使用しているため無視してください。translateX()translateY()translate3d(X, Y, Z)translate(X, Y)

この質問によると、すべてのブラウザー、特に Chrome でtransform: rotateZ(360deg).

于 2012-11-08T16:17:33.170 に答える
3

CPU の代わりに GPU を使用する次のクラス要素のいずれかでこれを使用することもできます。

.no-cpu {
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
    -ms-transform: translateZ(0);
}

<element class="event_indicator no-cpu">animation...</element >
于 2016-04-08T01:15:48.447 に答える