CSS アニメーション効果の検査と変更

アニメーション ツールの アニメーション インスペクター を使用して、CSS アニメーション効果を検査および変更 します 。

概要

• アニメーション ツールを開いて アニメーションをキャプチャします 。 アニメーション ツールは、アニメーションを自動的に検出し、グループに並べ替えます。

• アニメーションを検査するには、それぞれ速度を落とすか、それぞれを再生するか、ソース コードを表示します。

• タイミング、遅延、継続時間、またはキーフレーム オフセットを変更してアニメーションを変更します。

概要

アニメーション ツールには、次の 2 つのメイン目的があります。

• アニメーションの検査。 アニメーション グループのソース コードを遅くしたり、再生したり、検査したりできます。

• アニメーションの変更。 アニメーション グループのタイミング、遅延、継続時間、またはキーフレーム オフセットを変更する必要があります。 ベジエ編集とキーフレーム編集は現在サポートされていません。

アニメーション インスペクターでは、CSS アニメーション、CSS の切り替え、Web アニメーションがサポートされています。 requestAnimationFrame アニメーションは現在サポートされていません。

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

アニメーション グループは、相互に関連する可能性があるアニメーションのグループです。 現在、Web にはグループ アニメーションの実際の概念がないため、モーション デザイナーと開発者は、アニメーションが 1 つの一貫した視覚効果としてレンダリングされるように、個々のアニメーションを作成して時間を設定する必要があります。 アニメーション インスペクターは、開始時刻 (遅延などを除く) に基づいて関連するアニメーションを予測します。 アニメーション インスペクターでは、アニメーションも並べてグループ化されます。

つまり、同じスクリプト ブロック内ですべてトリガーされる一連のアニメーションがグループ化されます。 アニメーションが非同期の場合は、別のグループに配置されます。

作業の開始

アニメーション インスペクターを開くには、DevTools で次のいずれかの方法を使用します。

• メイン ツール バーまたはドロワーから、[その他のツール] () ボタンをクリックし、[アニメーション] を選択します。

  

• [ カスタマイズ ] メニューから[ DevTools のカスタマイズと制御 ()] メニュー ボタンをクリックし、[ その他のツール ] サブメニューをポイントして、[ アニメーション] を選択します。

• コマンド メニューから: DevTools にフォーカスがある場合は、Ctrl + Shift + P (Windows/Linux) または Command + Shift + P (macOS) を押してコマンド メニューを開き、「」と入力animationsし、[ドロワー: アニメーションを表示] を選択します。

既定では、アニメーション ツールはコンソール ツールの横にあるドロワーで開きます。 ドロワーの [アニメーション] ツールを使用すると、メイン ツール バーの別のツールを使用する場合と同時に使用できます。

アニメーション インスペクターは、4 つのメイン セクション (またはペイン) にグループ化されます。 このガイドでは、次のように各ペインを参照します。

インデックス	Pane	説明
1	Controls	ここから、現在キャプチャされているすべてのアニメーション グループをクリアするか、現在選択されているアニメーション グループの速度を変更できます。
2	概要	[ 詳細 ] ウィンドウで検査および変更するには、ここでアニメーション グループを選択します。
3	Timeline	ここからアニメーションを一時停止して開始するか、アニメーション内の特定のポイントにジャンプします。
4	詳細	現在選択されているアニメーション グループを検査して変更します。

アニメーションをキャプチャするには、アニメーション インスペクターが開いている間にアニメーションをトリガーする操作を実行するだけです。 ページ読み込み時にアニメーションがトリガーされた場合は、アニメーションインスペクターを開いてページを更新してアニメーションを検出します。

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

アニメーションをキャプチャした後、再生するにはいくつかの方法があります。

• [概要] ウィンドウのサムネイルにカーソルを合わせると、プレビューが表示されます。
• [ 概要 ] ウィンドウから [アニメーション グループ] を選択し ( [詳細 ] ウィンドウに表示されるように)、 再生 (をクリックします。 アニメーションはビューポートで再生されます。 アニメーション速度 (をクリックして、現在選択されているアニメーション グループのプレビュー速度を変更します。 赤い垂直バーを使用して、現在の位置を変更できます。
• 赤い垂直バーをクリックしてドラッグし、ビューポート アニメーションをスクラブします。

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

アニメーション グループをキャプチャした後、[ 概要 ] ウィンドウでアニメーション グループをクリックして詳細を表示します。 [ 詳細 ] ウィンドウでは、個々のアニメーションが行に割り当てられます。

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

アニメーションの左端の暗いセクションは、その定義です。 右側の色あせたセクションは、イテレーションを表します。 たとえば、次の図では、セクション 2 と 3 はセクション 1 のイテレーションを表しています。

2 つの要素に同じアニメーションが適用されている場合、アニメーション インスペクターは要素に同じ色を割り当てます。 色はランダムであり、意味がありません。 たとえば、次の図では、 要素と 要素div.cwccw.earlierとdiv.cwccw.later同じアニメーション (spinrightleft) が適用div.ccwcw.earlierdiv.ccwcw.laterされています。

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

アニメーション インスペクターを使用してアニメーションを変更するには、次の 3 つの方法があります。

• アニメーション期間。
• キーフレームのタイミング。
• 開始時刻の遅延。

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

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

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

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

注:

このページの一部は、 Google によって 作成および共有され、 クリエイティブ・コモンズ属性 4.0 国際ライセンスに記載されている条件に従って使用される作業に基づく変更です。 元のページは ここに あり、 Kayce Basques (テクニカル ライター、Chrome DevTools & Lighthouse) によって作成されています。

この作品は 、クリエイティブ・コモンズ属性4.0国際ライセンスに基づきライセンスされています。