Using the Chromium Animations Inspector for CSS Keyframes

This article provides a comprehensive overview of how developers can utilize the Animations inspector in Chromium-based web browsers to debug and refine CSS keyframe transitions. By capturing active animations on a webpage, the tool allows users to manipulate playback speeds, pause transitions, and manually scrub through the animation timeline. These features give developers granular control over the browser's rendering engine to inspect visual states at any specific millisecond.

Accessing and Capturing Animations

Before you can manipulate an animation, the Animations inspector must be open to record it.

  1. Open Chromium Developer Tools by pressing F12 or Ctrl+Shift+I (Cmd+Option+I on Mac).
  2. Open the Command Menu with Ctrl+Shift+P (Cmd+Shift+P on Mac).
  3. Type "Animations" and select Show Animations to open the drawer.

Once open, the inspector automatically listens for CSS transitions, CSS keyframe animations, and Web Animations API executions. It groups simultaneous animations together into blocks displayed in the overview pane. Trigger the animation on your webpage, and a visual representation of the timeline will populate in the tool.

Slowing Down Animation Playback

The Animations inspector intercepts the browser's internal animation clock, allowing you to alter the playback speed of captured transitions without changing your actual CSS code.

At the top-left of the Animations panel, there are preset speed controls: 100%, 25%, and 10%.

  • Clicking 25% or 10% immediately slows down the execution rate of the currently selected animation group, as well as any animations triggered directly on the page while that speed is selected.
  • This global throttling scales the duration of the keyframes proportionally. For example, a 1-second transition played at 10% speed will take 10 seconds to complete, making it easy to spot jarring movements, layout shifts, or incorrect easing curves with the naked eye.

Scrubbing Through CSS Keyframes

Scrubbing allows you to manually control the exact current time of an animation, effectively freezing the DOM in mid-transition so you can inspect the computed styles.

To scrub through an animation:

  1. Select a captured animation group from the top overview pane to load its detailed timeline into the main workspace.
  2. Click the Pause button in the top-left corner of the panel, or simply click anywhere on the time ruler at the top of the timeline.
  3. Locate the vertical red line (the playhead/scrubber) at the beginning of the timeline.
  4. Click and drag the red playhead left and right across the timeline.

As you drag the scrubber, Chromium calculates the exact interpolated values of the CSS properties at that specific millisecond and renders them on the screen in real time.

Inspecting Keyframe Nodes

Within the timeline, individual HTML elements are listed on the left, and their corresponding animation bars are displayed on the right.

  • Keyframe Indicators: For CSS animations using @keyframes, you will see hollow circles along the colored animation bar. The first and last circles represent the 0% (from) and 100% (to) states, while any middle circles represent intermediate keyframe percentages.
  • Pinpoint Inspection: By dragging the red scrubber directly over one of these circles, you can view the exact CSS declarations applied at that keyframe in the Elements > Styles pane.
  • Live Timing Adjustments: While paused or scrubbing, you can also drag the keyframe circles left or right to alter the timing, or drag the entire bar to adjust the animation-delay, allowing you to test fixes before copying the updated values back into your stylesheet.