CSS3のプロパティはアニメーションもCPU集中的ですか？

Question

はこの繰り返しのアニメーションコードは、私のシステム？：集中的

@-webkit-keyframes animate {-webkit-animation-iteration-count:infinite;...} 

されているすべてのCSS3プロパティのCPUが遅くなりますか？

ありがとうございました。

Answer 1

ボックスシャドウ&テキストシャドウを使用しないでください。ページ全体、またはbody要素を試してアニメーション化しないでください。また、translate3d、scale3d、rotate3dは、コンピュータやモバイルデバイス上でハードウェアアクセラレーションが行われるため、使用しないでください。上で述べたように、プロパティをアニメートするのは避けてください。私はしかし、1つまたは4つの無限にアニメーション化された要素があなたのページを減速させることは疑います。

Improving the Performance of your HTML5 App

UPDATE

気をつけろ！現在、ブラウザはtransform-3Dプロパティのハードウェアアクセラレーションを廃止しています。あなたは現在と将来のあなたのアプリを最適化するために他の方法を使わなくてはなりません。

Answer 2

各ブラウザには独自のCSS3実装があり、エフェクトが処理されレンダリングされる方法はさまざまです。 1つのブラウザは特定のものを詰まらせ、別のブラウザはそうしない可能性があります。あなたはちょうど慎重であることが最善です：CSS3の効果を過度に使いすぎてはいけません。あなたが実際にパフォーマンスを心配している場合は、古いノートパソコンなどを使っていつでもサイトのテストを試みることができます。それが詰まるならば、あなたはグラデーションや何かを誇張しているかもしれません。

私の仲間のプログラマーの一人（C++アプリケーションに関しては、ここでは完全に適用可能です）：実際に気づくまで、パフォーマンスの問題は心配しないでください:)。

Answer 3

アニメーションを見るときに、ブラウザのCPU使用率をチェックします。一部の機能はシステムの速度を落とさないかもしれませんが、他の機能が原因かもしれません。

一部のブラウザでは、特定のことについて異なる動作をすることができます。しかし、回転アニメーションを使ってテストしたところ、3.5ghzマシンでは、複数のブラウザでテストして約30〜50％のCPU使用率を使用していました。それが無限の繰り返しに設定されているかどうかは関係ありませんでした。

現在、一部の機能はマシンの速度を遅くし、ユーザーフレンドリーではありません。これらの機能を使用する前に、これらの機能が最適化されるまで待つことができます。 iPod touchでもアニメーションがスムーズに見えるので、非効率的に設計されていると感じています。

また、当時のブラウザではGPUアクセラレーションが実行されていなかったことにも注意してください。

Answer 4

私は約15個の要素が地震のように揺れているように見えるウェブページを持っていました。アニメーションは10％増分で、1秒間続きます。それは無限ループで繰り返されます。私はプロセッサの使用が急増していることに気づいた。だから私はイエスと言うだろうが、それはあなただけを使用する場合、3Dは、あなたのCSS3アニメーション、例えばに変換

Answer 5

、アニメーションによって異なります

@keyframes animation { 
    0% { transform: translate3d(288px,123px,0px) rotate(10deg) scale(1,1) } 
    50% { transform: translate3d(388px,123px,0px) rotate(20deg) scale(2,2) } 
    100% { transform: translate3d(488px,123px,0px) rotate(30deg) scale(3,3) } 
} 

あなたがにブラウザを指示した後にCPU使用率がフラットになりますアニメーションを再生する。これは、3D変換は常にブラウザによるGPUアクセラレーションによってレンダリングされるためです。 （注：GPUアクセラレーションで上記のように1つの3Dトランスフォームを設定すれば十分です）。

クロームCPUプロファイラを実行中に、次のスナップショットが取得されています

あなたが見ることができるようにCSS3アニメーションは、この場合には（いくつかのJavaScriptコードを使用して指示された後、CPU活動が平坦ですアニメーションの長さは2秒でした）。