Sofia Emelianova
Chrome DevTools の [アニメーション] タブは、CSS アニメーションの速度を遅くしたり、再生したり、タイミングを調整したり、結果をすぐに確認したりできる強力なツールです。
[アニメーション] タブを開くと、アニメーションが自動的に記録され、便利にグループ化されます。また、次のことができます。
- アニメーションを再生したり、スロー再生したりして、詳しく確認できます。
- CSS 値を手動で推測して設定するのではなく、タイムライン上の点をドラッグして、時間、タイミング、遅延を調整できます。
また、[要素] > [スタイル] ペインの [イージング エディタ] で、イージングのタイミングを編集したり、カスタムの cubic-bezier カーブ値を設定したりできます。詳しくは、Easing Editor でアニメーションと遷移のタイミングを編集するをご覧ください。
実践的な学習を希望される場合は、CSS アニメーション効果を検査して変更するガイドをご覧ください。