アニメーション: CSS のアニメーション効果を調査して変更する

Kayce Basques
Kayce Basques
X GitHub
Sofia Emelianova
Sofia Emelianova
GitHub

Chrome DevTools の [Animations] ドロワータブを使用して、アニメーションを検査、変更します。

概要

アニメーションをキャプチャするには、[アニメーション] パネルを開きます。アニメーションを自動的に検出してグループに分類します。

[アニメーション] パネルには、主に次の 2 つの目的があります。

  • アニメーションを検査する。アニメーション グループのソースコードを遅くしたり、再生したり、検査したりする。
  • アニメーションを変更する。アニメーション グループのタイミング、遅延、時間、キーフレーム オフセットを変更します。キーフレームとベジェ曲線の編集はサポートされていません。

[アニメーション] パネルは、CSS アニメーション、CSS 遷移、ウェブ アニメーション、View Transitions API をサポートしています。requestAnimationFrame アニメーションはまだサポートされていません。

アニメーション グループとは

アニメーション グループとは、互いに関連しているように見えるアニメーションのセットです。

現時点では、ウェブにはグループ アニメーションという概念がないため、モーション デザイナーとデベロッパーは、個々のアニメーションを合成してタイミングを調整し、1 つの連続したビジュアル エフェクトとして表示します。[アニメーション] パネルでは、開始時間（遅延を除く）に基づいて関連するアニメーションが予測され、アニメーションが並べてグループ化されます。

つまり、[アニメーション] パネルでは、同じスクリプト ブロックでトリガーされたアニメーションがグループ化されますが、非同期の場合は異なるグループに分類されます。

アニメーション パネルを開く

[アニメーション] パネルを開く方法は 2 つあります。

  • その他 [DevTools のカスタマイズと制御] > [その他のツール] > [アニメーション] を選択します。 メニューのアニメーション。

  • 次のいずれかを使用してコマンド メニューを開きます。

    • macOS の場合: command+shift+P
    • Windows、Linux、ChromeOS の場合: Ctrl+Shift+P

    次に、Show Animations と入力して、対応する Drawer パネルを選択します。 [アニメーションを表示] を選択します。

デフォルトでは、[コンソール] ドロワーの横のタブとして [アニメーション] パネルが開きます。引き出しタブとして、任意のパネルで使用したり、DevTools の上部に移動したりできます。

アニメーション パネルが空である。

[アニメーション] パネルを開くと、進行中のアニメーションが自動的にキャプチャされます。ページの読み込み時にアニメーションがトリガーされた場合や、すでに停止している場合は、パネルを開いた状態でページを再読み込みします。

アニメーション パネルの UI に慣れる

[アニメーション] パネルには、次の 4 つのメイン セクションがあります。

アニメーション パネルのセクション。

  1. 制御。ここで、キャプチャしたアニメーション グループを すべて消去したり、アニメーションを 一時停止または 再開したり、選択したアニメーション グループの速度を変更したりできます。

  2. 概要。キャプチャされたアニメーション グループを、スクロール ドリブンと レギュラー（時間ベース）の 2 種類のアイコンで示します。

    ここでアニメーション グループを選択して、[詳細] ペインで検査および変更します。

  3. タイムライン。アニメーション グループのタイプに応じて、タイムラインは次のいずれかになります。

    • によるスクロール ドリブン アニメーションの場合はピクセル単位です。
    • 時間ベースのアニメーションをする場合はミリ秒単位です。

    タイムラインでは、アニメーションをしたり、スクラブしたり、特定の位置にジャンプしたりできます。

  4. 詳細。選択したアニメーション グループを調べて変更します。

アニメーションをキャプチャするには、[アニメーション] パネルを開いた状態でアニメーションをトリガーします。

アニメーションを検査する

アニメーションをキャプチャしたら、次のような方法で再生できます。

  • [概要] ペインでサムネイルにカーソルを合わせると、プレビューが表示されます。
  • プレイヘッド（赤い縦棒）をドラッグしてビューポート アニメーションをスクラブするか、タイムラインの任意の場所をクリックしてプレイヘッドを特定の位置に設定します。アニメーションがすでに再生中の場合は再生を継続し、それ以外の場合は停止します。
  • [概要] ペインからアニメーション グループを選択して（[詳細] ペインに表示されるように）、リプレイ ボタン。 [再生] ボタンを押します。アニメーションがビューポートで再生されます。

[コントロール] バーの アニメーションの再生速度ボタン。 [アニメーションの速度] ボタンをクリックして、選択したアニメーション グループのプレビュー速度を変更します。

アニメーションの詳細を表示する

アニメーション グループをキャプチャしたら、[概要] ペインでそのグループをクリックして詳細を表示します。

[詳細] ペインでは、各アニメーションが 1 行で表示されます。対応する要素の名前全体を表示するには、名前列のサイズを変更します。

[詳細] ペイン。

アニメーションにカーソルを合わせると、ビューポート内でハイライト表示されます。アニメーションをクリックして、[要素] パネルで選択します。

アニメーションにカーソルを合わせると、ビューポート内でハイライト表示されます。

一部のアニメーションは、animation-iteration-count プロパティが infinite に設定されている場合、無限に繰り返されます。[アニメーション] パネルには、定義と反復処理が表示されます。

アニメーションのイテレーション。

アニメーションの左端の暗い部分が定義です。右側の色が薄いセクションは反復処理を表します。

たとえば、次のスクリーンショットでは、セクション 2 と 3 はセクション 1 の反復処理を表しています。