DevTools のヒント: CSS アニメーションを検査して変更する方法

Sofia Emelianova

Chrome DevTools の [アニメーション] タブは、速度を遅くしたり、再生したり、CSS アニメーションのタイミングを調整したり、結果をすぐに確認したりできる便利なツールです。

[アニメーション] タブを開くと、アニメーションが自動的に録画され、グループ化されて次のことが可能になります。

• アニメーションを再生したり、速度を落としたりして、詳細に調べられるようにします。
• CSS 値を手動で推測して設定するのではなく、タイムライン内のポイントをドラッグすることで、期間、タイミング、遅延を調整できます。

また、[要素] > [スタイル] ペインにある [イージング エディタ] で、イージングのタイミングの編集やカスタム cubic-bezier カーブの値の設定も行えます。詳しくは、イージング エディタでアニメーションと遷移のタイミングを編集するをご覧ください。

より実践的な学習をするには、CSS アニメーション効果の検査と変更に関するガイドをご覧ください。