Motion

The only allowed entrance pattern:

• opacity: 0 → 1
• translateY: 16px → 0
• Duration: 500ms
• Easing: ease-out
• Stagger between siblings: 60ms

Implement once, reuse everywhere. The three boxes below stagger in on mount; refresh to replay.

For hover, focus, and active state changes only — not entrances. Three durations:

• --transition-fast (120ms): colour swaps, focus rings
• --transition-base (180ms): background fills, borders
• --transition-slow (280ms): elevation, scale

• Bounce — jarring on dense layouts.
• Spring physics — unpredictable across viewports.
• Shimmer — visual noise; carries no real signal.
• Parallax — provokes motion sickness for some readers.
• Animated backgrounds — wastes battery, distracts from content.

When prefers-reduced-motion: reduce is set, the entrance reduces to opacity only at 200ms; transitions reduce to 80ms.

@media (prefers-reduced-motion: reduce) {
  .lex-entrance { animation-duration: 200ms; transform: none; }
  .lex-transition-fast,
  .lex-transition-base,
  .lex-transition-slow { transition-duration: 80ms; }
}