Chrome DevTools のアニメーション インスペクターでアニメーションを調査して変更します。
TL;DR
- アニメーション インスペクターを開いてアニメーションを取得します。アニメーションが自動的に検出され、グループに分けられます。
- アニメーションの速度を遅くしたり、再生したり、ソースコードを表示したりして、アニメーションを調査します。
- タイミング、遅延、長さ、またはキーフレーム オフセットを変えて、アニメーションを変更します。
概要
Chrome DevTools のアニメーション インスペクターの目的は主に次の 2 つです。
- アニメーションの調査。アニメーション グループの速度を遅くしたり、再生したり、ソースコードを調べたりします。
- アニメーションの変更。アニメーション グループのタイミング、遅延、長さ、またはキーフレーム オフセットを変更します。 ベジエ編集とキーフレーム編集は、現在サポートされていません。
アニメーション インスペクターは、CSS アニメーション、CSS 遷移、ウェブ アニメーションをサポートしています。requestAnimationFrame アニメーションは現在サポートされていません。
アニメーション グループとは
アニメーション グループは、互いに関連しているように見えるアニメーションのグループです。 現在、ウェブにはグループ アニメーションという概念は実際にはないため、モーション デザイナーとデベロッパーは、個々のアニメーションが一貫性のある 1 つの視覚効果として見えるようにこれらを構成し、タイミングを調整する必要があります。 アニメーション インスペクターは、開始時間（遅延などは除く）に基づいて、どれが関連するアニメーションかを予測し、それらをグループ化して順に並べます。 言い換えると、同じスクリプト ブロック内でトリガーされるすべてのアニメーションが同じグループにまとめられますが、それらが非同期の場合は、別のグループにまとめられます。
使ってみる
アニメーション インスペクターを開くには、次の 2 つの方法があります。
[Elements] パネルの [Styles] ペインにアクセスし、[Animations] ボタン（
![[animations] ボタン](https://developers.google.com/web/tools/chrome-devtools/inspect-styles/imgs/animations-button.png?hl=ja)
）ボタンを押します。[Command Menu] を開き、
Drawer: Show Animationsと入力します。
アニメーション インスペクターが、[Console] ドロワーの隣にタブとして開きます。これはドロワー タブであるため、任意の DevTools パネルから使用できます。
アニメーション インスペクターは、4 つのメイン セクション（ペイン）に分かれています。このガイドでは、各ペインを次のように呼びます。
- コントロール。ここから、現在取得されているすべてのアニメーション グループを消去したり、現在選択されているアニメーション グループの速度を変更したりできます。
- 概要。ここでアニメーション グループを選択し、詳細ペインで調査して変更します。
- タイムライン。 ここからアニメーションを一時停止および開始したり、アニメーションの特定の時点にジャンプしたりします。
- 詳細。 現在選択されているアニメーション グループを調査して変更します。
アニメーションを取得するには、アニメーション インスペクターが開いている状態で、単純にアニメーションをトリガーする操作を実行します。 ページの読み込み時にアニメーションがトリガーされた場合は、ページを再読み込みすることで、アニメーション インスペクターがアニメーションを検出できるようにすることができます。
アニメーションの調査
取得したアニメーションは、複数の方法で再生できます。
- 概要ペインでサムネイルにカーソルを合わせると、プレビューが表示されます。
- 概要ペインからアニメーション グループを選択し（選択すると詳細ペインに表示されます）、再生ボタン（
）を押します。アニメーションがビューポートで再生されます。現在選択されているアニメーション グループのプレビュー速度を変更するには、アニメーション速度ボタン（
）をクリックします。赤い縦線を使用すると、現在の位置を変更できます。 - 赤い縦線をクリックしてドラッグすると、ビューポートのアニメーションを自由に動かすことができます。
アニメーションの詳細の表示
アニメーション グループを取得したら、概要ペインでそのグループをクリックすると、詳細が表示されます。 詳細ペインでは、各アニメーションが個別の行に表示されます。
アニメーションにカーソルを合わせると、ビューポートでハイライト表示されます。アニメーションをクリックすると、[Elements] パネルでアニメーションが選択されます。
アニメーションの左端にある、色が濃いセクションはアニメーションの定義です。右側の、色が薄いセクションは反復を表します。 たとえば、以下のスクリーンショットでは、セクション 2 と 3 がセクション 1 の反復を表しています。
2 つの要素に同じアニメーションが適用されている場合、アニメーション インスペクターではそれらに同じ色が割り当てられます。
色そのものはランダムに割り当てられ、意味はありません。たとえば、以下のスクリーンショットでは、div.eye.left::after と div.eye.right::after の 2 つの要素に同じアニメーション（eyes）が適用されており、div.feet::before と div.feet::after 要素に同じアニメーションが適用されています。
アニメーションの変更
アニメーション インスペクターでは、次の 3 つの方法でアニメーションを変更できます。
- アニメーションの長さ。
- キーフレームのタイミング。
- 開始時間の遅延。
このセクションでは、以下のスクリーンショットが元のアニメーションを表しているとします。
アニメーションの長さを変更するには、最初の円または最後の円をクリックしてドラッグします。
アニメーションでキーフレーム ルールが定義されている場合、それらのルールは内側が白い円で表されます。 キーフレームのタイミングを変更するには、それらの円のいずれかをクリックしてドラッグします。
アニメーションに遅延を追加するには、円以外の任意の場所をクリックしてドラッグします。
