このページは Cloud Translation API によって翻訳されました。

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

Kayce Basques

Rachel Andrew

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

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

ブラウザの互換性

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

transform

対応ブラウザ

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

ソース

opacity

対応ブラウザ

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

ソース

will-change

対応ブラウザ

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

ソース

要素を移動する

要素を移動するには、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

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

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

[Summary] パネルに、レンダリングでは 37 ミリ秒、ペイントでは 79 ミリ秒と表示されます。 — </ph> animation-with-top-left レンダリング処理が発生します。

[Summary] パネルには、レンダリングとペイントの値がゼロと表示されます。 — </ph> Animations-with-transform レンダリング処理は発生しません

Firefox DevTools

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

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

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

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

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

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

fps メーターが 50% のフレームがドロップされたと表示される — </ph> animation-with-top-left フレームの 50% が欠落している場合、

fps メーターに、フレームの 1% のみがドロップされたと表示される — </ph> Animation-with-transform フレームの 1% しかドロップされません。

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

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

Chrome DevTools

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

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

再ペイントされることを示すために緑色でハイライト表示された UI 要素 — Google マップの例では、要素が再ペイントされています。

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

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

Firefox DevTools

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

まとめ

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

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

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