DevTools Tips: How to inspect and modify CSS animations

The Chrome DevTools Animations tab is a powerful tool that helps you slow down, replay, adjust CSS animation timings, and see the results right away.

The Animations tab, while open, records animations automatically, conveniently groups them, and lets you:

• Replay and slow down animations to better inspect them.
• Adjust durations, timings, and delays by dragging points in a timeline instead of guessing and setting CSS values manually.

Additionally, you can edit the easing timings and set custom cubic-bezier curve values with the Easing Editor in the Elements > Styles pane. To learn more, see Edit animation and transition timings with the Easing Editor.

For a more hands-on learning experience, follow the Inspect and modify CSS animation effects guide.