CSS animation inspector

Click an animated element and see its CSS animations as easing curves, with the duration, delay, iteration count and @keyframes ready to read and copy.

What it shows

When the selected element runs one or more CSS animations, the side panel adds an Animations section, titled with the count, for example 2 Animations. It brings together everything that is usually spread across several properties and a separate @keyframes rule:

• Easing curves. Each animation's timing function drawn as a curve on a grid, in its own color. Several animations share one chart, so you can compare them.
• A replay on hover. Hover the chart and each curve draws itself again using the animation's real duration, easing and delay, so you can feel the timing as well as see its shape.
• The animation CSS. An animation declaration listing each animation's name, duration, timing function, delay and iteration count. Names are colored to match their curves.
• The keyframes. The @keyframes block for each animation, with every step and the properties it changes.

One copy button copies the whole block, declaration and keyframes together.

How to inspect an animation

1. Open the page with the animated element.
2. Start Screen Ruler by clicking its toolbar icon or pressing Alt + Shift + S (Option + Shift + S on a Mac).
3. Click the element that moves, fades or spins. If no animation shows up, it may run on a parent or child: press Alt + Shift + Up or Down to move through the tree.
4. In the side panel's Element tab, find the Animations section.
5. Hover the curve chart to replay the timing, and click the copy button to copy the CSS.

How it reads timing and keyframes

Timing functions. Screen Ruler draws the five named easings (linear, ease, ease-in, ease-out and ease-in-out) from their control points in the CSS specification, any custom cubic-bezier() curve, and steps() functions, which are drawn as real staircases with the jump at the start or end of each step.

Keyframes. The keyframes come from the browser's Web Animations API, which reports the steps of the running animation. Some animations only change CSS custom properties, which that API leaves out. When that happens, Screen Ruler reads the @keyframes rule straight from the page's stylesheets instead, including rules inside @media and @supports blocks, so the block is not empty.

Two-step animations are written with from and to, longer ones with percentages, and colors inside keyframes follow the format you picked in the Colors section.

Limits

• CSS animations only. The section lists animations set with the CSS animation property. Motion driven by JavaScript libraries or element.animate() is not shown.
• Some easings are not drawn. The newer linear() easing function and steps() with jump- keywords are not plotted.
• The selected element only. Animations on children or pseudo-elements need their own selection.
• Cross-origin keyframes. The stylesheet fallback cannot read stylesheets the browser hides from other domains.

Transitions, the other half of CSS motion, have their own section. See the transition inspector.

When it is useful

• Recreating a loader or entrance effect. Get the duration, easing and keyframes of an animation you like in one copy.
• Tuning motion. Compare easing curves side by side and see why one animation feels snappier than another.
• Auditing a design system. Check that components use the agreed durations and easings.
• Debugging slow-feeling pages. Spot a long delay or an unexpected iteration count that holds content back.

The same side panel also covers box shadows and gradients.

Analyze Animations is part of Screen Ruler's Inspect and Studio plans, and every install starts with a free 7-day trial with everything unlocked, no card needed.

Common questions

How do I see the keyframes of an animation on a website?

Start Screen Ruler, click the animated element and open the Animations section in the side panel. The @keyframes block for each animation is listed under the animation declaration, and the copy button copies both.

How is this different from the Animations panel in DevTools?

The DevTools Animations panel records animations as they play and lets you scrub a timeline. Screen Ruler shows the definition instead: easing curves, timing values and keyframes for the selected element, in a side panel you can read and copy from without recording anything.

Does it show transitions too?

Transitions appear in their own Transitions section next to animations, with their own curves. See the transition inspector.

Can it inspect JavaScript animations like GSAP?

No. It reads CSS animations set with the animation property. Motion created in JavaScript does not appear in the section.