高性能な CSS アニメーションを作成する方法

Kayce Basques

Rachel Andrew

このガイドでは、高パフォーマンスの CSS アニメーションを作成する方法について説明します。

詳しくは、一部のアニメーションが遅い理由をご覧ください。 おすすめします。

ブラウザの互換性

このガイドでおすすめする CSS プロパティはすべて、クロスブラウザ対応に優れています サポート。

transform

opacity

will-change

要素を移動する

要素を移動するには、translate または rotation キーワード値を使用します。 transform プロパティ。

たとえば、アイテムをスライドしてビューに入れるには、translate を使用します。

.animate {
  animation: slide-in 0.7s both;
}

@keyframes slide-in {
  0% {
    transform: translateY(-1000px);
  }
  100% {
    transform: translateY(0);
  }
}

要素を回転するには rotate を使用します。次の例では、要素を回転させます。 360 度回転できます。

.animate {
  animation: rotate 0.7s ease-in-out both;
}

@keyframes rotate {
  0% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(360deg);
  }
}

要素のサイズを変更する

要素のサイズを変更するには、scale キーワード値を使用します。 transform プロパティ。

.animate {
  animation: scale 1.5s both;
}

@keyframes scale {
  50% {
    transform: scale(0.5);
  }
  100% {
    transform: scale(1);
  }
}

要素の公開設定を変更する

要素の表示と非表示を切り替えるには、opacity を使用します。

.animate {
  animation: opacity 2.5s both;
}

@keyframes opacity {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

レイアウトまたはペイントをトリガーするプロパティを避ける

アニメーションに CSS プロパティ（transform と opacity 以外）を使用する前に、 レンダリング パイプラインに対するプロパティの影響を判別します。 どうしても必要な場合を除き、レイアウトまたはペイントをトリガーするプロパティは使用しないでください。

レイヤを強制的に作成する

一部のアニメーションが遅い理由で説明されているように、 新しいレイヤに要素を配置すると、ブラウザによる再描画が不要になります。 レイアウトの残りの部分を再描画します。

ブラウザは通常、どのアイテムをページに配置するかを適切に判断できます。 新しいレイヤを作成できますが、 will-change プロパティ。 このプロパティは、名前が示すように、この要素が動作していることをブラウザに伝えます。 なんらかの方法で変更される必要があります。

CSS では、will-change を任意のセレクタに適用できます。

body > .sidebar {
  will-change: transform;
}

ただし、仕様は は、この変換を常に実行しようとしている要素に対してのみ あります。たとえば、ユーザーがスライドインして表示するサイドバーがこれに該当します。 できます。頻繁に変更されない要素については、 変更が発生する可能性がある場合に JavaScript を使用して will-change する。必ず ブラウザが必要な最適化を行うのに十分な時間を与え、 変更が停止されたときにプロパティを 変更することはできません

will-change をサポートしていないブラウザでレイヤを強制的に作成する場合 （ほとんどの場合は Internet Explorer）は、transform: translateZ(0) を設定できます。

遅いアニメーションや不具合のあるアニメーションをデバッグする

Chrome DevTools と Firefox DevTools には、 エラーの原因を探ります

アニメーションがレイアウトをトリガーするかどうかを確認する

transform 以外を使用して要素を移動するアニメーションは、 処理が遅くなる可能性があります次の例では、transform を使用してアニメーションを比較しています top と left を使用してアニメーションに変換します。

.box {
  position: absolute;
  top: 10px;
  left: 10px;
  animation: move 3s ease infinite;
}

@keyframes move {
  50% {
     top: calc(90vh - 160px);
     left: calc(90vw - 200px);
  }
}

.box {
  position: absolute;
  top: 10px;
  left: 10px;
  animation: move 3s ease infinite;
}

@keyframes move {
  50% {
     transform: translate(calc(90vw - 200px), calc(90vh - 160px));
  }
}

次の 2 つの Glitch の例でこれをテストできます。 DevTools を使用してパフォーマンスを 確認します

• 変更前:
• 変更後:

Chrome DevTools

1. [パフォーマンス] パネルを開きます。
2. ランタイム パフォーマンスの記録 オフにすることもできます。
3. [概要] タブを確認します。

[Summary] タブの [Rendering] にゼロ以外の値が表示されている場合は、 アニメーションによってブラウザがレイアウトを動作させることを意味します。

</ph> <ph type="x-smartling-placeholder">で確認できます。

</ph> <ph type="x-smartling-placeholder">

Firefox DevTools

Firefox DevTools のウォーターフォール ブラウザが時間を費やしている場所を把握するのに役立ちます。

1. [パフォーマンス] パネルを開きます。
2. アニメーションの途中でパフォーマンスの記録を開始します。
3. 録画を停止して [ウォーターフォール] タブを確認します。

[スタイルを再計算] のエントリが表示されている場合は、 つまり、ブラウザはページの最初に レンダリング ウォーターフォール アニメーションをレンダリングできます

フレーム落ちがないか確認する

1. Chrome DevTools で [レンダリング] タブを開きます。
2. [FPS meter] チェックボックスをオンにします。
3. アニメーションの実行中に値を確認します。

[FPS メーター] UI の上部にある [フレーム] ラベルを確認します。 これにより、50% 1 (938 m) dropped of 1878 などの値が表示されます。高パフォーマンスの アニメーションの割合が高い（99% など）。つまり、フレーム数が少ない場合 アニメーションが滑らかに見えます

</ph> <ph type="x-smartling-placeholder">

</ph> <ph type="x-smartling-placeholder">

アニメーションがペイントをトリガーするかどうかを確認する

プロパティの中には、ブラウザによる描画コストが他のプロパティよりも高くなるものがあります。対象 たとえば、ぼかし（影など）を長くする要素 赤いボックスを描くよりも ペイントするほうが簡単ですこれらの違いは、 CSS ですが、ブラウザの DevTools を使用して、どの領域を適用する必要があるかを特定できます 再ペイント、その他のペイント関連のパフォーマンス問題。

Chrome DevTools

1. Chrome DevTools で [レンダリング] タブを開きます。
2. [Paint Flashing] を選択します。
3. 画面上でポインタを動かします。

</ph>

画面全体が点滅する、または意図しない部分がハイライト表示される 詳しく調査する必要があります

特定のプロパティが問題の原因かどうかを判断するには、 ペイント関連のパフォーマンスの問題、Paint Profiler 役立つことがあります。

Firefox DevTools

1. [設定] を開き、以下のツールボックス ボタンを追加します。 ペイントの点滅を切り替える。
2. 検査するページでボタンをオンに切り替えて、マウスまたは スクロールしてハイライト表示された領域を確認してください。

まとめ

可能であれば、アニメーションを opacity と transform に制限して、 レンダリング パスの構成ステージでアニメーションを作成します。DevTools を使用して アニメーションの影響を受けるパスのステージを指定します。

ペイント プロファイラを使用して、ペイント オペレーションが特に問題ないかどうかを確認します。 高価です何か見つかった場合は、別の CSS プロパティが渡していないか確認してください。 パフォーマンスが向上します

パフォーマンスの問題が発生した場合のみ、will-change プロパティは慎重に使用してください。