アニメーションのパフォーマンスとフレームレート

ウェブ上でのアニメーションは、SVG、JavaScript（<canvas> や WebGL を含む）、CSS の animation、<video>、アニメーション GIF、さらにアニメーション PNG やその他の種類の画像もあります。CSS プロパティをアニメーションさせることによるパフォーマンスコストは、プロパティによって異なり、高価な CSS プロパティをアニメーションさせると、ブラウザーが滑らかなフレームレートを実現するのに苦労し、ジャンクとなることがあります。

動画やアニメーション GIF などのアニメーションメディアでは、パフォーマンスの主な懸念はファイルサイズです。パフォーマンスに悪影響を与えない程度に速くファイルをダウンロードすることが最大の課題です。CSS、SVG、<canvas>、WebGL、他にも JavaScript アニメーションなど、コードベースのアニメーションは、帯域幅のフットプリントが小さくてもパフォーマンスの問題が発生することがあります。これらのアニメーションは、CPU を消費したり、ジャンクを発生させたりすることがあります。

ユーザーは、すべてのインターフェイスとスムーズにやり取りできること、そしてすべてのユーザーインターフェイスが応答することを期待しています。アニメーションは、サイトをより速く、レスポンスよく感じさせるのに役立ちますが、アニメーションは正しく行われないと、サイトをより遅く、乱雑に感じさせることもあります。レスポンシブユーザーインターフェイスのフレームレートは 60 フレーム/秒 (fps) です。常に 60fps を維持することは不可能ですが、すべてのアニメーションで高いフレームレートと安定したフレームレートを維持することが重要です。

CSS アニメーションでは、いくつかのキーフレームを指定して、それぞれのキーフレームがアニメーションの特定の段階での要素の姿を定義するために、 CSS を使用しています。ブラウザーは、各キーフレームから次のキーフレームへの遷移としてアニメーションを作成します。

JavaScript を使用して要素をアニメーション化するのに比べ、CSS アニメーションは簡単に作成することができます。また、ブラウザーがフレームをレンダリングするタイミングや、必要に応じてフレームを削除することを制御できるので、パフォーマンスも向上します。

しかし、CSS のプロパティを変更した場合のパフォーマンスコストは、プロパティによって異なる場合があります。アニメーションが滑らかに現れるレートは、1 秒間に 60 フレームというのが一般的に受け入れられています。1 秒間に 60 フレームの速度では、ブラウザーはスクリプトの実行、必要に応じてスタイルとレイアウトの再計算、更新される領域の再描画に 16.7 ミリ秒の時間を使用します。遅いスクリプトや 高コストの CSS プロパティのアニメーションは、ブラウザーがスムーズなフレームレートを達成するのに苦労するため、ジャンクとなることがあります。