Names how long a change takes and how it accelerates, by kind rather than by number, retuned from one place.
Remarks
Durations — durationFast is for a change the eye should not have to wait for, a hover or a press;
durationNormal for one that has to be followed, a panel opening or a row expanding; durationSlow for one
covering the viewport.
Easings — easingEnter decelerates, for a thing arriving, and easingExit accelerates, for a thing leaving,
so the two read as opposite halves of the same gesture. easingStandard does both, for a thing that stays and
merely moves.
Reduced motion — every duration collapses to zero under prefers-reduced-motion: reduce, so a transition
stated through these tokens honours the preference with no rule of its own. An animation whose duration is written
as a literal opts out of that and owes its own media query, which is the reason to state it as a token.
Motion tokens.
Names how long a change takes and how it accelerates, by kind rather than by number, retuned from one place.
Remarks
Durations —
durationFastis for a change the eye should not have to wait for, a hover or a press;durationNormalfor one that has to be followed, a panel opening or a row expanding;durationSlowfor one covering the viewport.Easings —
easingEnterdecelerates, for a thing arriving, andeasingExitaccelerates, for a thing leaving, so the two read as opposite halves of the same gesture.easingStandarddoes both, for a thing that stays and merely moves.Reduced motion — every duration collapses to zero under
prefers-reduced-motion: reduce, so a transition stated through these tokens honours the preference with no rule of its own. An animation whose duration is written as a literal opts out of that and owes its own media query, which is the reason to state it as a token.