DevTools Tips hero logo

DevTools Tips: How to inspect and modify CSS animations

Published on

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.

Published on Improve article


What's New In DevTools (Chrome 105)


Deprecations and removals in Chrome 105

This site uses cookies to deliver and enhance the quality of its services and to analyze traffic. If you agree, cookies are also used to serve advertising and to personalize the content and advertisements that you see. Learn more about our use of cookies.