Animations and Transitions Debugger

Chrome DevTools → More tools → Animations (or Cmd+Shift+P → "Animations"). The panel records CSS transitions and animations as they run, displaying them on a timeline with scrubbing and playback speed controls.

The animations panel offers 10%, 25%, and 100% playback speed. Slowing to 10% reveals timing issues, easing curve problems, and stutter that are invisible at full speed — essential for debugging complex multi-element choreography.

Each recorded animation appears as a row with its element name, duration bar, delay offset, and iteration count. The keyframe diamonds show timing function changes. Hovering a row highlights the element in the viewport.

Drag the playhead in the Animation panel to any point in the animation timeline. The page renders that frame exactly — freeze any animation at any moment to inspect element positions, opacity, and transform values in the Computed panel simultaneously.

Click an animation row to expand it. Individual keyframes appear as diamonds on the timeline. Click a keyframe diamond to jump to the corresponding @keyframes rule in the Styles panel and edit it with live preview.

Chrome DevTools shows cubic-bezier curves for each animation segment. Click the curve icon next to a timing function in the Styles panel to open the cubic-bezier editor — drag control points and see the animation update in real time.

CSS transitions are recorded in the Animations panel when triggered. Trigger a hover or class toggle, and the panel captures the transition. Inspect its duration, delay, and timing function — useful when transitions feel wrong but their source is unclear.

With Rendering → Layer Borders enabled (DevTools → Rendering), animated elements on their own GPU layer show green borders. Non-composited animations (animating width, top, color) show no layer border and may cause paint flashing — visible with Paint Flashing enabled.

Record a Performance profile during animation. In the flame chart, look for long Paint or Layout events correlating with animation frames. Compositor-only animations (transform/opacity) appear only as Composite Layer events — fast and paint-free.

JS animations using rAF appear in the Performance panel under the Frames section. Long rAF callbacks that exceed 16ms cause frame drops. Profile the callback to find expensive calculations and move them off the main thread using Web Workers if possible.

The Web Animations API (element.animate()) and WAAPI-based libraries appear in the Animations panel alongside CSS animations. The panel cannot distinguish the source — CSS vs WAAPI — but the scrubbing and slow-motion controls work for both.

What does scrubbing the Animations panel playhead allow you to do?

The DevTools Animations panel records CSS transitions and animations with a scrubbable timeline, variable playback speed, keyframe inspection, and cubic-bezier editing. Combined with Performance profiling and Layer visualization, it provides comprehensive tools for debugging both correctness and performance of CSS animations.