Chrome DevTools の [Animations] ドロワータブでアニメーションを調査して変更します。
概要
アニメーションをキャプチャするには、[アニメーション] パネルを開きます。アニメーションが自動的に検出され、グループに分けられます。
[アニメーション] パネルの目的は主に次の 2 つです。
- アニメーションを調査します。アニメーション グループの速度を遅くしたり、再生したり、ソースコードを調べたりします。
- アニメーションを変更する。アニメーション グループのタイミング、遅延、長さ、またはキーフレーム オフセットを変更します。キーフレーム編集とベジエ編集はサポートされていません。
[Animations] パネルでは、CSS アニメーション、CSS 遷移、ウェブ アニメーション、View Transitions API がサポートされます。
requestAnimationFrame
アニメーションはまだサポートされていません。
アニメーション グループとは
アニメーション グループは、互いに関連しているように見える一連のアニメーションです。
現時点では、ウェブにはグループ アニメーションという概念は実際にはないため、モーション デザイナーとデベロッパーは、個々のアニメーションを一貫性のある 1 つの視覚効果として見えるように構成し、タイミングを調整する必要があります。[Animations] パネルでは、開始時間(遅延を除く)に基づいて関連するアニメーションが予測され、並べてグループ化されます。
つまり、[アニメーション] パネルでは、同じスクリプト ブロック内でトリガーされるアニメーションがグループ化されますが、非同期の場合は別のグループにまとめられます。
アニメーション パネルを開く
[アニメーション] パネルを開くには、次の 2 つの方法があります。
- [DevTools のカスタマイズと制御] > [その他のツール] > [アニメーション] を選択します。
次のいずれかの方法でコマンド メニューを開きます。
- macOS の場合: command+shift+P
- Windows、Linux、ChromeOS の場合: Ctrl+Shift+P
次に、
Show Animations
と入力して、対応するドロワーパネルを選択します。
デフォルトでは、[Animations] パネルは [Console] ドロワーの横のタブとして開きます。ドロワー タブとして、任意のパネルで使用したり、DevTools の上部に移動したりできます。
[アニメーション] パネルを開くと、進行中のアニメーションが自動的にキャプチャされます。ページの読み込み時にアニメーションがトリガーされた場合や、すでに停止している場合は、パネルを開いた状態でページを再読み込みします。
アニメーション パネルの UI に精通する
[アニメーション] パネルには、次の 4 つのメイン セクションがあります。
- 制御。ここで、キャプチャしたアニメーション グループを すべて消去したり、アニメーションを Pause または 再開したり、選択したアニメーション グループの速度を変更したりできます。
概要。キャプチャされたアニメーション グループの 2 種類(
によるスクロール ドリブンと による定期(時間ベース))がアイコンで示されます。ここでアニメーション グループを選択して、[詳細] ペインで調べて変更します。
タイムライン。アニメーション グループのタイプに応じて、タイムラインは次のいずれかになります。
- のスクロールドリブン アニメーションのピクセル数。
- 時間ベースのアニメーションを する場合(ミリ秒単位)。
タイムラインでは、アニメーションを
したり、スクラブしたり、特定の位置にジャンプしたりできます。詳細。選択したアニメーション グループを調査して変更します。
アニメーションをキャプチャするには、[Animations] パネルを開いている間にトリガーします。
アニメーションを検査する
キャプチャしたアニメーションは、いくつかの方法で再生できます。
- [概要] ペインでサムネイルにカーソルを合わせると、プレビューが表示されます。
- プレイヘッド(赤い縦線)をドラッグしてビューポートのアニメーションを自由に動かすことができます。また、タイムラインの任意の場所をクリックして、プレイヘッドを特定の位置に設定することもできます。アニメーションはすでに再生中であれば再生され続け、それ以外の場合は停止します。
- [概要] ペインからアニメーション グループを選択し(選択すると [詳細] ペインに表示されます)、 [再生] ボタンを押します。「 ビューポートでアニメーションが再生されます。
[コントロール] バーの [アニメーション速度] ボタンをクリックして、選択したアニメーション グループのプレビュー速度を変更します。
アニメーションの詳細を表示
アニメーション グループをキャプチャしたら、[概要] ペインでそのグループをクリックして詳細を表示します。
[詳細] ペインでは、個々のアニメーションがそれぞれ別の行に表示されます。対応する要素の名前全体を表示するには、名前列のサイズを変更します。
アニメーションにカーソルを合わせて、ビューポートでハイライト表示します。アニメーションをクリックして、[要素] パネルで選択します。
一部のアニメーションは、animation-iteration-count
プロパティが infinite
に設定されている場合、無限に繰り返されます。[Animations] パネルに、定義と反復処理が表示されます。
アニメーションの左端の濃い部分が、アニメーションの定義です。右側の、色が薄いセクション 反復を表します。
たとえば、次のスクリーンショットでは、セクション 2 と 3 がセクション 1 の反復を表しています。
2 つの要素に同じアニメーションが適用されている場合、[アニメーション] パネルではそれらに同じ色が割り当てられます。色自体はランダムであり、意味はありません。たとえば、下のスクリーンショットでは、div.feet::before
要素と div.feet::after
要素と同様に、2 つの要素 div.eye.left::after
と div.eye.right::after
に同じアニメーション(eyes
)が適用されています。
アニメーションを変更する
[アニメーション] パネルでアニメーションを変更する方法は 3 つあります。
- アニメーションの長さ。
- キーフレームのタイミング。
- 開始時間の遅延。
このセクションでは、次のスクリーンショットが元のアニメーションを表しているとします。
アニメーションの長さを変更するには、最初または最後の円をドラッグします。
アニメーションでキーフレーム ルールが定義されている場合、これらは内側の白い円として表されます。 キーフレームのタイミングを変更するには、それらの円のいずれかをドラッグします。
アニメーションに遅延を追加するには、円ではなくアニメーション自体をクリックして、任意の場所までドラッグします。
@keyframes
をリアルタイムで編集
[スタイル] で @keyframes
を変更すると、すぐに [アニメーション] パネルで効果を確認できます。
こちらのデモページで試すことができます。
- [アニメーション] パネルを開きます。ページに表示されているパルスのアニメーションを自動的にキャプチャします。アクションバーのコントロールでアニメーションを選択します。
- [要素] で
class="pulser"
を使用して要素を検査し、[スタイル] で@keyframes pulse
セクションを見つけます。 - 2 つ目のキーフレームを
50%
から20%
に変更するなど、キーフレームを変更してみましょう。 - [スタイル] での変更が、[アニメーション] パネルでキャプチャしたアニメーションにどのように影響するかを確認します。
アニメーション中に ::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)
[要素] でこの構造を編集するには >スタイル:
- DevTools を開き、View Transitions API を使用していたページを調べます。(例: こちらのデモページ)。
- [アニメーション] で、 アイコン [一時停止] をクリックします。
ページでアニメーションをトリガーします。[Animations] パネルがイベントをキャプチャし、すぐに一時停止します。これで、DOM の
<head>
要素の上に::view-transition
構造が見つかりました。[要素] >スタイル:
::view-transition
疑似要素の CSS を変更します。アニメーションを再開して再生し、結果を確認します。
詳細については、View Transitions API によるスムーズでシンプルな遷移をご覧ください。