06 · Motion

4 curves and 4 durations cover everything.

Every easing curve and duration token, in full — plus the raw 9-step duration scale they're built from.

Easing

default

Default easing for most transitions

cubic-bezier(0.4, 0, 0.2, 1)

var(--transition-easing-default)

in

Ease-in for elements entering

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

var(--transition-easing-in)

out

Ease-out for elements exiting

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

var(--transition-easing-out)

in-out

Ease-in-out for symmetric transitions

cubic-bezier(0.4, 0, 0.2, 1)

var(--transition-easing-in-out)

Name	Value	Variable	Description
instant	0ms	var(--transition-duration-instant)	Instant transition (no animation)
fast	150ms	var(--transition-duration-fast)	Fast transition for micro-interactions
normal	250ms	var(--transition-duration-normal)	Normal transition duration
slow	400ms	var(--transition-duration-slow)	Slow transition for emphasized changes

0ms

var(--duration-0)

75ms

var(--duration-75)

100ms

var(--duration-100)

150ms

var(--duration-150)

200ms

var(--duration-200)

300ms

var(--duration-300)

500ms

var(--duration-500)

700ms

var(--duration-700)

1000ms

var(--duration-1000)

Live preview

New PR ready to review

feat/token-refresh · 3 files changed

animation: tile-rise 300ms cubic-bezier(0.4, 0, 0.2, 1)