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

Kayce Basques
Sofia Emelianova
Sofia Emelianova
GitHub

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

概要

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

[Animations] パネルには、主に次の 2 つの目的があります。

  • アニメーションを検査する。アニメーションの速度を下げたり、リプレイしたり、ソースコードを確認したりできます できます。
  • アニメーションを変更する。スペースのタイミング、遅延、時間、キーフレーム オフセットを クリックします。キーフレームとベジェの編集はサポートされていません。
で確認できます。

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

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

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

現在のところ、ウェブにはグループ アニメーションという実質的な概念はなく、モーション デザイナーやデベロッパーは、個々のアニメーションを作成してタイミングを調整し、1 つの一貫した視覚効果として表示されるようにします。[Animations] パネルでは、開始時間（遅延を除く）に基づいて関連するアニメーションが予測され、並べてグループ化されます。

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

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

[Animations] パネルを開く方法は 2 つあります。

  • その他。 [Customize and control DevTools] > を選択します。その他のツール >アニメーション。 メニューのアニメーション。

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

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

    「Show Animations」と入力し、対応するドロワー パネルを選択します。 アニメーションを表示します。

デフォルトでは、[Animations] パネルは [Console] ドロワーの横のタブとして開きます。ドロワータブは、任意のパネルで使用することも、DevTools の上部に移動することもできます。

[アニメーション] パネルが空です。

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

アニメーション パネルの UI について理解を深める

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

[Animations] パネルのセクション。

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

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

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

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

    • マウスのスクロールドリブン アニメーションのピクセル数。
    • 時間ベースのアニメーションをスケジュール設定する場合（ミリ秒単位）。

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

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

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

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

キャプチャしたアニメーションは、いくつかの方法で再生できます。

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

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

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

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

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

[詳細] ペイン

アニメーションにカーソルを合わせて、ビューポートでハイライト表示します。アニメーションをクリックして [Elements] パネル。

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

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

アニメーションの反復処理。

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

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

アニメーションの反復処理の図。

2 つの要素に同じアニメーションが適用されている場合、[Animations] パネルでは、 同じ色にします色自体はランダムであり、意味はありません。たとえば、次のスクリーンショットでは、 2 つの要素 div.eye.left::after と div.eye.right::after に同じアニメーション（eyes）がある div.feet::before 要素や div.feet::after 要素と同様に適用されます。

色分けされたアニメーション。

アニメーションを変更する

[Animations] パネルでアニメーションを変更するには、次の 3 つの方法があります。

  • アニメーションの時間。
  • キーフレームのタイミング。
  • 開始時間の遅延。
で確認できます。

このセクションでは、次のスクリーンショットが元のアニメーションであるとします。

変更前の元のアニメーション。

アニメーションの長さを変更するには、最初または最後の円をドラッグします。

変更した期間。

アニメーションでキーフレーム ルールが定義されている場合、これらは内側の白い円として表されます。 キーフレームのタイミングを変更するには、このアイコンのいずれかをドラッグします。

変更したキーフレーム。

アニメーションに遅延を追加するには、円ではなくアニメーション自体をクリックして、任意の場所にドラッグします。

遅延の変更。

@keyframes をリアルタイムで編集

[スタイル] で @keyframes を変更すると、すぐに [アニメーション] パネルで効果を確認できます。

こちらのデモページでお試しください。

  1. [アニメーション] パネルを開きます。ページに表示されているパルスのアニメーションを自動的にキャプチャします。アクションバーのコントロールでアニメーションを選択します。
  2. [Elements] で class="pulser" を使用して要素を調べ、[Elements] で [@keyframes pulse] セクションを見つけます。
  3. 2 つ目のキーフレームを 50% から 20% に変更するなど、キーフレームを変更してみましょう。
  4. [スタイル] での変更が、[アニメーション] パネルでキャプチャしたアニメーションにどのように影響するかを確認します。

アニメーション中に ::view-transition 疑似要素を編集する

View Transitions API を使用すると、2 つの状態間の遷移をアニメーション化しながら、1 つのステップで DOM を変更できます。アニメーション中に、API は次の構造の疑似要素ツリーを構築します。

::view-transition
└─ ::view-transition-group(root)
   └─ ::view-transition-image-pair(root)
      ├─ ::view-transition-old(root)
      └─ ::view-transition-new(root)

[Elements] でこの構造を編集するには >スタイル:

  1. DevTools を開き、View Transitions API を使用していたページを調べます。（例: こちらのデモページ）。
  2. [アニメーション] で [一時停止] 一時停止をクリックします。

  3. ページで、アニメーションをトリガーします。[Animations] パネルがイベントをキャプチャし、すぐに一時停止します。これで、DOM の <head> 要素の上に ::view-transition 構造が見つかりました。

    ::view-transition 疑似要素の CSS を編集する

  4. [Elements] >スタイル: ::view-transition 疑似要素の CSS を変更します。

  5. アニメーションを再開してから再生して、結果を確認します。

詳しくは、View Transitions API によるスムーズでシンプルな遷移をご覧ください。