CSS3プロパティはAnimate Too Too Gentiveのようなものですか？

StackOverflow https://stackoverflow.com/questions/8400075

質問

この繰り返しのアニメーションコードは私のシステムを遅くしますか？：

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

すべてのCSS3プロパティはCPU集中していますか？

ありがとう。

役に立ちましたか？

解決

Box-Shadow＆Text-Shadowの使用は避けてください。ページ全体、またはボディ要素をアニメーション化して、翻訳3D、scale3d、rotate3dを使用して、ハードウェアがコンピューターやモバイルデバイスで加速しているため、使用しないでください。上記のように、プロパティのアニメーションの過剰使用を避けてください。しかし、1つまたは4つの無限にアニメーション化された要素がページを遅くすることを疑います。

HTML5アプリのパフォーマンスの向上

アップデート

注意してください！ブラウザは、変換3Dプロパティのハードウェアアクセラレーションを削除しています。現在および将来、他の方法を使用してアプリを最適化する必要があります。

他のヒント

各ブラウザには、CSS3の独自の実装があり、効果の処理とレンダリングの方法が異なります。あるブラウザは特定のものを窒息させますが、別のブラウザはそうでないかもしれません。あなたはただ賢明であることをお勧めします：CSS3の効果を過度に使用しないでください。すべてがうまくいくでしょう。パフォーマンスについて本当に心配している場合は、古いラップトップなどを使用してサイトをテストしてみることができます。それが窒息する場合 - あなたはグラデーションなどで誇張されているかもしれません。

私の仲間のプログラマーの1人が言っているように（C ++アプリケーションに関しては、ここで完全に適用できます）：実際にそれらに気付くまでパフォーマンスの問題について心配しないでください:)。

私は、約15の要素が地球の地震のように揺れているように見えるウェブページを持っていました。アニメーションは10％増加し、1秒間続きます。無限のループで繰り返されます。プロセッサがSkyrocketを使用していることに気付きました。だから私はイエスと言うでしょうが、それはアニメーションに依存します、

アニメーションを表示するときに、ブラウザのCPU使用法を確認します。一部の機能はシステムを遅くすることはないかもしれませんが、他の機能もあります。

一部のブラウザが特定のもので異なる行動をとることができるのは事実です。ただし、スピニングアニメーションを使用してテストし、3.5GHzマシンで約30〜50％のCPU使用を使用して、複数のブラウザーでテストしました。無限の反復に設定されているかどうかにかかわらず、それは問題ではありませんでした。

現在のところ、特定の機能はマシンを遅くし、ユーザーフレンドリーではない可能性があります。これらの機能を使用する前に、これらの機能を最適化するのを待つことをお勧めします。 iPod Touchでもアニメーションがスムーズに見えるので、それらは非効率的に設計されたと感じています。

また、ブラウザは当時GPU加速度を実行していなかったことに注意してください。これが要因になる可能性があります。

CSS3アニメーションで3D変換のみを使用する場合、例： 

@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変換を設定するだけで十分です）。

Chrome CPUプロファイラーの実行中に、次のスナップショットが撮影されます。

enter image description here

ご覧のとおり、CSS3アニメーションがいくつかのJavaScriptコードを使用して指示された後、CPUアクティビティはフラットです（この場合、アニメーションは2秒の長さでした）。

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top