Inspect and modify animations with the Chrome DevTools Animations drawer tab.
Overview
To capture animations, open the Animations panel. It automatically detects animations and sorts them into groups.
The Animations panel has two main purposes:
- Inspect animations. Slow down, replay, or inspect the source code for an animation group.
- Modify animations. Modify the timing, delay, duration, or keyframe offsets of an animation group. Keyframe and Bezier editing isn't supported.
The Animations panel supports CSS animations, CSS transitions, web animations, and the View Transitions API.
requestAnimationFrame animations are not yet supported.
What's an animation group?
An animation group is a set of animations that appear to be related to each other.
For now, the web has no real concept of a group animation, so motion designers and developers compose and time individual animations to appear as one coherent visual effect. The Animations panel predicts related animations based on start time (excluding delays) and groups them side-by-side.
In other words, the Animations panel groups together animations triggered in the same script block, but if they're asynchronous, they end up in different groups.
Open the Animations panel
There are two ways to open the Animations panel:
- Select
Customize and control DevTools > More tools > Animations.