アニメーションは適切に機能する必要があり、そうでない場合、ユーザー エクスペリエンスに悪影響が及びます。
アニメーションを実行するときは常に 60 fps を維持してください。途切れや停止が少なくなると、ユーザーの目に留まりユーザー エクスペリエンスに悪影響が及ぶためです。
- アニメーションがパフォーマンスの問題を引き起こさないように注意してください。特定の CSS プロパティをアニメーション化した場合の影響を必ず把握してください。
- ページ(レイアウト)のジオメトリを変更する、またはペイントを引き起こすプロパティをアニメーション化すると、特に負荷がかかります。
- 可能であれば、変形と不透明度の変更だけを行います。
will-change
を使用して、アニメーション化する内容をブラウザが認識できるようにします。
プロパティのアニメーション化は無料ではありません。一部のプロパティは他のプロパティよりも低コストでアニメーション化できます。たとえば、要素の width
と height
をアニメーション化すると、そのジオメトリが変化し、ページ上の他の要素が移動したり、サイズが変更されたりする場合があります。このプロセスは「レイアウト」(Firefox などの Gecko ベースのブラウザでは「リフロー」)と呼ばれ、ページに要素が多い場合はコストがかかる可能性があります。レイアウトがトリガーされるたびに、通常はページまたはその一部をペイントする必要があり、これは通常、レイアウト オペレーション自体よりもさらにコストがかかります。
可能な限り、レイアウトやペイントをトリガーするプロパティのアニメーション化は避けてください。ほとんどの最新のブラウザでは、これはアニメーションを opacity
または transform
に制限することを意味します。どちらもブラウザは高度に最適化できます。アニメーションが JavaScript と CSS のどちらで処理されてもかまいません。
高パフォーマンスのアニメーションの作成に関するガイドをご覧ください。
will-change
プロパティの使用
will-change
を使用して、要素のプロパティを変更する予定をブラウザが認識できるようにします。これにより、ブラウザは変更を加える前に最適な最適化を行うことができます。ただし、will-change
を過度に使用しないでください。過剰に使用すると、ブラウザがリソースを浪費し、パフォーマンスの問題をさらに引き起こします。
一般的な経験則として、ユーザーの操作またはアプリケーションの状態によって、今後 200 ミリ秒以内にアニメーションがトリガーされる可能性がある場合は、要素に will-change
を設定することをおすすめします。ほとんどの場合、アプリの現在のビュー内でアニメーション化する要素では、変更するプロパティに対して will-change
を有効にする必要があります。これまでのガイドを通じて使用しているボックス サンプルの場合、形状と不透明度に will-change
を追加すると、次のようになります。
.box {
will-change: transform, opacity;
}
この機能に対応しているブラウザ(最新のほとんどのブラウザ)では、プロパティの変更やアニメーション化をサポートするために、内部で適切な最適化が行われるようになります。
CSS と JavaScript のパフォーマンスの比較
パフォーマンスの観点から CSS と JavaScript アニメーションの相対的なメリットについて説明しているページやコメント スレッドがウェブ上に数多くあります。次の点に注意してください。
CSS ベースのアニメーションと、ネイティブでサポートされているウェブ アニメーションは、通常、「コンポジタ スレッド」と呼ばれるスレッドで処理されます。これは、スタイル設定、レイアウト、描画、JavaScript が実行されるブラウザの「メインスレッド」とは異なります。つまり、ブラウザがメインスレッドで負荷の高いタスクを実行している場合でも、これらのアニメーションは中断されることなく継続できます。
変形と不透明度に関するその他の変更も、多くの場合、コンポジタ スレッドによって処理できます。
アニメーションがペイント、レイアウト、またはその両方をトリガーする場合は、「メインスレッド」が処理を実行する必要があります。これは CSS ベースのアニメーションにも JavaScript ベースのアニメーションにも当てはまります。また、レイアウトやペイントのオーバーヘッドにより、CSS や JavaScript の実行に関連する作業が軽視され、疑問が解消する可能性が高くなります。