08 — Motion

Motion & Animation

Transition tokens, easing curves, and animation patterns. All animations respect prefers-reduced-motion.

Duration Tokens

duration-fast100ms

duration-normal200ms

duration-slow300ms

duration-slower500ms

Easing Curves

easing-defaultGeneral purposecubic-bezier(0.4, 0, 0.2, 1)

easing-inExit animationscubic-bezier(0.4, 0, 1, 1)

easing-outEnter animationscubic-bezier(0, 0, 0.2, 1)

easing-bouncePlayful micro-interactionscubic-bezier(0.34, 1.56, 0.64, 1)

Animation Patterns

Hover Lift

translateY(-2px)

Status pulse

Loading spinner

↓

Bounce indicator

Reduced Motion

All animations respect prefers-reduced-motion: reduce:

→ Transitions collapse to instant state changes (0ms duration)
→ Infinite animations (pulse, shimmer) stop completely
→ Page transitions use opacity-only crossfade

@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-fast: 0ms;
    --duration-normal: 0ms;
    --duration-slow: 0ms;
    --duration-slower: 0ms;
  }
}