How to inspect CSS animations in Chrome DevTools

Chrome DevTools has a full set of tools for reading CSS motion, but they are spread across three places: the Animations panel, the Styles pane and the console. Once you know where each one is, you can take any CSS animation apart in a few minutes.

This guide walks through all three, using real menu names from current Chrome. At the end, we cover the cases where DevTools runs out and a capture tool saves time.

Open the Animations panel

The Animations panel is hidden by default. It records CSS animations, CSS transitions and Web Animations API animations as they start, and lays them out on a timeline.

1. Open DevTools. Right-click the page and choose Inspect, or press Cmd+Option+I (Ctrl+Shift+I on Windows and Linux).
2. Open the panel. Click the three-dot Customize and control DevTools menu, then More tools > Animations. It opens in the drawer at the bottom. The quicker route is the Command Menu: Cmd+Shift+P (Ctrl+Shift+P), type "animations" and pick Show Animations.
3. Trigger the animation. The panel only records what starts after it is open. Reload the page, scroll, click or hover to start the motion again.
4. Pick a group. Animations that start together are grouped. Each group shows up as a small preview at the top of the panel. Click one to load it into the timeline.

Slow it down and scrub

Most interface animations last 200 to 600 ms. That is too fast to see what is going on. The Animations panel gives you three ways to look closer.

1. Change the playback speed. The speed buttons at the top of the panel are 100%, 25% and 10%. Pick 10% and replay the group. A 300 ms transition now takes three seconds.
2. Replay and pause. Use the replay button to run the selected group again, and the pause button to freeze every animation on the page. Pausing is useful when you want to inspect computed styles at one moment.
3. Scrub the timeline. Drag the playhead across the timeline header. The page updates frame by frame, so you can stop at the exact moment an element overshoots.

Each row in the timeline is one animated element. The row shows the delay as empty space and the duration as a bar, with keyframes marked along it. Hover the row to highlight the element on the page. Click the node name to select it in the Elements panel.

Edit the timing live

You can change timing directly in the timeline, which is a fast way to test "what if this were slower?" without touching code.

• Drag the whole bar left or right to change the delay.
• Drag the end of the bar to change the duration.
• Drag a keyframe marker to move that keyframe's offset.

The changes apply to the running page only. Reload and they are gone, so write down any values you like.

Read the rules in the Styles pane

The timeline shows when things move. The Styles pane shows what moves and how.

1. Select the animated node in Elements, either by clicking it in the Animations panel or with the inspect tool.
2. Find the declaration. In Elements > Styles, look for animation, animation-name or transition. Expand the shorthand with the small triangle to see each longhand.
3. Jump to the keyframes. Click the animation name. DevTools takes you to the @keyframes rule, where you can read and edit each step.
4. Open the easing editor. Next to any timing function, such as ease-out or cubic-bezier(.22, 1, .36, 1), there is a small curve icon. Click it to open the easing editor popover. It shows the curve, lets you drag the two control points, and plays a preview dot along a track. There are presets you can cycle through, too.

The easing editor is the quickest way to understand a curve you do not recognise. A steep start means the element leaps out and settles. A control point above the top of the box means it overshoots. For more on reading curves, see CSS easing functions explained.

Force hover and other states

Many animations only run on :hover or :focus. Moving the mouse to DevTools ends the hover, so you need to force the state.

1. Select the element that has the hover rule (often a parent of the thing that moves).
2. Click :hov in the Styles pane toolbar. A row of checkboxes appears: :active, :hover, :focus, :visited, :focus-within, :focus-visible and :target.
3. Tick :hover. The hover rules apply and any transition runs, so the Animations panel records it. Untick it to see the transition back.

You can also right-click the node in the Elements tree and use Force state. Either way, this only changes CSS state. It does not fire JavaScript events like mouseenter, which matters for many hover effects. The guide on capturing hover animations covers that case.

Read everything with getAnimations()

The console gives you the most exact numbers. document.getAnimations() returns every running CSS animation, CSS transition and Web Animations API animation in the document. Paste this into the Console panel while the animation is playing or paused:

document.getAnimations().forEach(anim => {
  const effect = anim.effect;
  const timing = effect.getTiming();
  console.group(
    anim.animationName || anim.transitionProperty || anim.id || 'animation',
    effect.target
  );
  console.log('type:', anim.constructor.name);
  console.log('duration:', timing.duration, 'delay:', timing.delay,
              'iterations:', timing.iterations, 'fill:', timing.fill);
  console.log('effect easing:', timing.easing);
  console.table(effect.getKeyframes());
  console.groupEnd();
});

A few notes on what comes back:

• anim.constructor.name is CSSAnimation, CSSTransition or Animation (for element.animate()).
• getKeyframes() returns one object per keyframe with its offset, easing and the animated property values. console.table makes it readable.
• For CSS animations, the animation-timing-function is applied per keyframe, so look at the easing column of the table. The effect-level easing will usually read linear.
• Finished animations without a fill are dropped from the list. Pause in the Animations panel first if the motion is short.

To narrow it to one element, select it in Elements and use $0.getAnimations() instead. Add { subtree: true } to include its children.

What DevTools will not show you

All of the above relies on the browser knowing about the animation. That is true for CSS and the Web Animations API. It is not true for:

• GSAP and similar libraries, which write inline styles on every frame from JavaScript.
• Lottie, which redraws an SVG or canvas.
• JavaScript hover effects that wait for mouseenter, which a forced :hover never sends.

Even for plain CSS, a hero with fifteen staggered elements means fifteen rows to read and fifteen @keyframes blocks to copy.

Where Capture Motion saves time

The Capture Motion extension does the reading for you. You pick an element, play its animation, and it records the keyframes, durations, delays and easing of every animated property, including motion from GSAP and Lottie that DevTools cannot see. Hover animations run with a real :hover state through the Chrome DevTools Protocol, attached only during the capture.

The popup shows the result as code in CSS, React and GSAP tabs, each with a Copy button. Copy for LLM copies the capture as JSON with an instruction for ChatGPT or Claude, and the Capture Motion button copies it for pasting into the Capture Motion Figma plugin, which rebuilds it as a Figma Motion timeline. Capture and preview need no account; copying or downloading needs a free one. For the full workflow, read how to copy an animation from any website.