Motion
Transitions and animations, with their timing curves and keyframes.
These sections appear in the Element tab only when they have something to say about the selected element. An element with nothing to warn about, no shadow and no gradient shows none of them.
Select an element with a transition or a CSS animation, and a Motion section appears in the Element tab, one row for each.
- The timing function is drawn as a curve, time across and progress up: a
cubic-bezieror a keyword with its two handles,steps()as stairs,linear()through its points. A curve that overshoots, such as a bounce past the end, gets room for it. - Beside it: the property or
@keyframesname, the duration, the delay, and for an animation how many times it runs, its direction and its fill mode. Hover the row and a dot runs along with that timing (not when motion is reduced). - An animation lists its keyframes, each with the properties it sets, as the stylesheet writes them. For a stylesheet from another site, which cannot be read, they come from the browser's running animation instead.
- The copy button copies it as a
transitionoranimation.
Questions
What does the Motion section show?
One row for each transition or CSS animation, with its timing function drawn as a curve, its duration and delay, and an animation's keyframes.
Can I see keyframes from another site's stylesheet?
Yes. They come from the browser's running animation instead of the stylesheet.