アニメーションは高いパフォーマンスを発揮する必要があります。パフォーマンスが低いと、ユーザー エクスペリエンスに悪影響を及ぼします。
アニメーションを作成する場合、常に 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 の実行に関連する作業を圧倒的に上回るため、この質問は意味がありません。