Overview Open Chrome DevTools What's New in DevTools DevTools tips Simulate mobile devices with Device Mode Performance insights: Get actionable insights on your website's performance Animations: Inspect and modify CSS animation effects Changes: Track your HTML, CSS, and JavaScript changes Coverage: Find unused JavaScript and CSS CSS Overview: Identify potential CSS improvements Issues: Find and fix problems Media: View and debug media players information Memory Inspector: Inspect ArrayBuffer, TypedArray, DataView, and Wasm Memory. Network conditions: Override the user agent string Security: Understand security issues Search: Find text across all loaded resources Sensors: Emulate device sensors WebAuthn: Emulate authenticators Engineering blog
Overview Open Chrome DevTools What's New in DevTools DevTools tips Simulate mobile devices with Device Mode Performance insights: Get actionable insights on your website's performance Animations: Inspect and modify CSS animation effects Changes: Track your HTML, CSS, and JavaScript changes Coverage: Find unused JavaScript and CSS CSS Overview: Identify potential CSS improvements Issues: Find and fix problems Media: View and debug media players information Memory Inspector: Inspect ArrayBuffer, TypedArray, DataView, and Wasm Memory. Network conditions: Override the user agent string Security: Understand security issues Search: Find text across all loaded resources Sensors: Emulate device sensors WebAuthn: Emulate authenticators Engineering blog

Animations: Inspect and modify CSS animation effects

Published on Updated on

Inspect and modify animations with the Chrome DevTools Animations drawer tab.

Overview

To capture animations, open the Animations tab. It automatically detects animations and sorts them into groups.

The Animations tab 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.
Gotchas

You can edit the timings of CSS transition and animation easings and configure custom Bezier curves with the Easing Editor in the Elements > Styles pane.

The Animations tab supports CSS animations, CSS transitions, and web animations. requestAnimationFrame animations are currently not supported.

What's an animation group?

An animation group is a set of animations that appear to be related to each other.

Currently, 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 tab predicts related animations based on start time (excluding delays) and groups them side-by-side.

In other words, the Animations tab groups together animations triggered in the same script block, but if they're asynchronous, they end up in different groups.

Get started

There are two ways to open the Animations tab:

  • Select More. Customize and control DevTools > More tools > Animations. Animations in the menu.

  • Open the Command Menu by pressing one of the following:

    • On macOS: Command+Shift+P
    • On Windows, Linux, or ChromeOS: Control+Shift+P

    Then start typing Show Animations and select the corresponding Drawer panel. Show Animations.

By default, the Animations tab opens up as a tab next to the Console drawer. As a drawer tab, you can use it with any panel or move it to the top of DevTools.

Empty Animations tab.

The Animations tab is grouped into four main panes (sections):

Animations tab panes.
  1. Controls. From here, you can clear all currently captured animation groups, or change the speed of the currently selected animation group.
  2. Overview. Select an animation group here to inspect and modify it in the Details pane.
  3. Timeline. Pause and start an animation from here, or jump to a specific point in the animation.
  4. Details. Inspect and modify the currently selected animation group.

To capture an animation, trigger it while the Animations tab is open. If an animation is triggered on page load, reload it.

Inspect animations

Once you've captured an animation, there are a few ways to replay it:

  • Hover over its thumbnail in the Overview pane to view a preview of it.
  • Click and drag the red vertical bar to scrub the viewport animation.
  • Select the animation group from the Overview pane (so that it's displayed in the Details pane) and press the Replay button. Replay button. The animation is replayed in the viewport.

Click on the Animation speed buttons. Animation speed buttons in the Controls bar to change the preview speed of the currently selected animation group.

View animation details

Once you've captured an animation group, click on it from the Overview pane to view its details. In the Details pane, each individual animation gets its own row.

The Details pane.

Hover over an animation to highlight it in the viewport. Click on the animation to select it in the Elements panel.

Hovering over an animation to highlight it in viewport.

Some animations repeat indefinitely if their animation-iteration-count property is set to infinite. The Animations tab displays their definitions and iterations.

Animation iterations.

The leftmost, darker section of an animation is its definition. The right, more faded sections represent iterations.

For example, in the screenshot below, sections two and three represent iterations of section one.

Diagram of animation iterations.

If two elements have the same animation applied to them, the Animations tab assigns them the same color. The color itself is random and has no significance. For example, in the screenshot below the two elements div.eye.left::after and div.eye.right::after have the same animation (eyes) applied to them, as do the div.feet::before and div.feet::after elements.

Color-coded animations.

Modify animations

There are three ways you can modify an animation with the Animations tab:

  • Animation duration.
  • Keyframe timings.
  • Start time delay.
Gotchas

Any changes you make in the Animations tab apply inline styles to the corresponding elements, so you can see and replay the resulting animations right away.

For this section, suppose that the screenshot below represents the original animation:

Original animation before modification.

To change the duration of an animation, click and drag the first or last circle.

Modified duration.

If the animation defines any keyframe rules, then these are represented as white inner circles. Click and drag one of these to change the timing of the keyframe.

Modified keyframe.

To add a delay to an animation, click the animation itself, not the circles, then drag it anywhere.

Modified delay.

Updated on Improve article

We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.