アニメーションの調査

By Kayce Basques

Technical Writer, Chrome DevTools & Lighthouse

Chrome DevTools のアニメーションインスペクターでアニメーションを調査して変更します。

アニメーションインスペクター

TL;DR

アニメーションインスペクターを開いてアニメーションを取得します。アニメーションが自動的に検出され、グループに分けられます。
アニメーションの速度を遅くしたり、再生したり、ソースコードを表示したりして、アニメーションを調査します。
タイミング、遅延、長さ、またはキーフレームオフセットを変えて、アニメーションを変更します。

概要

Chrome DevTools のアニメーションインスペクターの目的は主に次の 2 つです。

アニメーションの調査。アニメーショングループの速度を遅くしたり、再生したり、ソースコードを調べたりします。
アニメーションの変更。アニメーショングループのタイミング、遅延、長さ、またはキーフレームオフセットを変更します。ベジエ編集とキーフレーム編集は、現在サポートされていません。

アニメーションインスペクターは、CSS アニメーション、CSS 遷移、ウェブアニメーションをサポートしています。requestAnimationFrame アニメーションは現在サポートされていません。

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

アニメーショングループは、互いに関連しているように見えるアニメーションのグループです。現在、ウェブにはグループアニメーションという概念は実際にはないため、モーションデザイナーとデベロッパーは、個々のアニメーションが一貫性のある 1 つの視覚効果として見えるようにこれらを構成し、タイミングを調整する必要があります。アニメーションインスペクターは、開始時間（遅延などは除く）に基づいて、どれが関連するアニメーションかを予測し、それらをグループ化して順に並べます。言い換えると、同じスクリプトブロック内でトリガーされるすべてのアニメーションが同じグループにまとめられますが、それらが非同期の場合は、別のグループにまとめられます。

使ってみる

アニメーションインスペクターを開くには、次の 2 つの方法があります。

[Elements] パネルの [Styles] ペインにアクセスし、[Animations] ボタン（）ボタンを押します。
[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 要素に同じアニメーションが適用されています。

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