Sofia Emelianova
Chrome DevTools の [アニメーション] タブは、速度を遅くしたり、再生したり、CSS アニメーションのタイミングを調整したり、結果をすぐに確認したりできる便利なツールです。
[アニメーション] タブを開くと、アニメーションが自動的に録画され、グループ化されて次のことが可能になります。
- アニメーションを再生したり、速度を落としたりして、詳細に調べられるようにします。
- CSS 値を手動で推測して設定するのではなく、タイムライン内のポイントをドラッグすることで、期間、タイミング、遅延を調整できます。
また、[要素] > [スタイル] ペインにある [イージング エディタ] で、イージングのタイミングの編集やカスタム cubic-bezier カーブの値の設定も行えます。詳しくは、イージング エディタでアニメーションと遷移のタイミングを編集するをご覧ください。
より実践的な学習をするには、CSS アニメーション効果の検査と変更に関するガイドをご覧ください。