CSS transition inspector

Click any element and see its CSS transitions drawn as timing curves, with the properties, durations and delays behind each one, without opening DevTools.

What it shows

Select an element that has a CSS transition and a Transitions section appears on the Element tab of the side panel, titled with the number of transitioned properties. It has two parts:

• A timing curve chart. Each timing function is drawn as a curve on a grid, so you see the shape of the easing instead of reading four numbers.
• A transition declaration. Underneath, the transitions are written out as a transition shorthand, with each property name colored to match its curve.

Properties that share the same duration, timing function and delay are grouped onto one curve. A typical rule like transition: opacity 200ms ease, transform 200ms ease shows as a single curve covering both properties, while a property with its own timing gets its own color.

How to inspect a transition

1. Open the page and start Screen Ruler by clicking its toolbar icon or pressing Alt + Shift + S (Option on a Mac).
2. Hover the element you want to check and click it to lock the selection. If the transition sits on a wrapper, press Alt + Shift + ↑ to step up to the parent.
3. In the side panel, scroll the Element tab to the Transitions section.
4. Hover the chart to replay the curves, or use the copy button under the code block to copy the declaration.

How the curves are drawn

Screen Ruler reads transition-property, transition-duration, transition-timing-function and transition-delay from the element's computed styles, so you see the values the browser is actually using after every stylesheet, utility class and inline style has been applied.

• Keywords use their spec control points. linear, ease, ease-in, ease-out and ease-in-out are drawn from the same cubic-bezier values the CSS specification defines for them.
• Custom curves are drawn as written. Any cubic-bezier(x1, y1, x2, y2) is plotted directly.
• Steps are drawn as steps. steps(n, start) and steps(n, end) render as a staircase, not a smooth line.
• Hovering replays the timing. When you hover the chart, each curve draws itself using its own duration, easing and delay, so a 600ms ease-out with a 100ms delay feels different from a 200ms linear one, side by side.

What it cannot show

• Only the selected element. Transitions on ::before and ::after pseudo-elements, or on children, are not included. Select the child to see its own transitions.
• Only the current state. Values are read from the element as it is when you select it. If a site declares the transition only inside a :hover rule, it will not appear until that rule applies.
• Some newer timing functions. The linear() easing function with multiple stops and step positions such as jump-both are not drawn. Transitions that use them are left off the chart.
• It does not run the transition. The chart shows the timing, not the property change itself. Trigger the hover or class change on the page to see the real motion.

When it is useful

• Answering "why does this feel off?" Compare a sluggish hover with a snappy one and see whether the duration, the delay or the curve is the difference.
• Auditing motion consistency. Check that buttons, menus and cards in a design system all use the same easing and duration.
• Borrowing a curve you like. Find the exact cubic-bezier() behind a transition on someone else's site and copy it.
• Design handoff checks. Confirm the built component matches the timing in the motion spec.

For keyframe animations, the animation inspector draws timing curves the same way and lists the keyframes, and the gradient inspector and box shadow visualizer do the same job for other hard to read CSS values. The visualizing CSS docs cover all of them.

Inspect Transitions 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 cubic-bezier curve of a CSS transition?

Activate Screen Ruler, click the element, and open the Transitions section on the Element tab. Each timing function is drawn as a curve, and keywords like ease are converted to their real cubic-bezier() control points.

How is this different from the easing editor in Chrome DevTools?

DevTools lets you open and edit one timing function at a time from the Styles pane. Screen Ruler plots every transition on the selected element on one chart, groups properties that share a timing, and replays each curve at its real duration and delay when you hover, so you can compare them at a glance.

Why does an element with a hover effect show no transitions?

Either the effect is a keyframe animation rather than a transition, in which case it appears in the animation section, or the transition is declared on a different element, such as a parent or a pseudo-element. Use Alt + Shift + ↑ to check the parent.

Can I copy the transition CSS?

Yes. The section ends with a transition declaration built from the computed values, and the copy button below it copies the whole declaration.