Tokens

Motion

A small set of durations and easing curves. Hover a row to preview it. Motion respects prefers-reduced-motion across the system.

Durations

--motion-instant 0ms

--motion-fast 100ms

--motion-base 150ms

--motion-moderate 200ms

--motion-slow 300ms

--motion-xslow 400ms

--ease-default cubic-bezier(0.2, 0, 0, 1)

--ease-enter cubic-bezier(0, 0, 0.2, 1)

--ease-exit cubic-bezier(0.4, 0, 1, 1)

--ease-spring cubic-bezier(0.34, 1.56, 0.64, 1)