native-motion-firstlisted

<!-- last-verified: 2026-07 --> # Native motion first Every animation library ships more than the browser already gives you for free. Before adding one, check whether a native API covers the case — it usually does, it ships zero bytes, and it composes with the platform's own accessibility and performance handling instead of fighting it. ## Decision rule Pick the narrowest API that covers the need, in this order: 1. **CSS transitions/keyframes** — simple state feedback (hover, focus, toggle, loading spinner, a class flipping a property). Declarative, no JS on the hot path, the browser owns the timing. 2. **Web Animations API (`el.animate()`)** — imperative control without a library: play/pause/reverse/seek, animations driven by runtime values, or composing several keyframe effects. Reach here when CSS can express the keyframes but the *triggering logic* needs JS control over playback, not when you need JS because CSS transitions feel awkward to write. 3. **View Transitions API** — animating a page or DOM-state swap as a single before/after crossfade-and-morph, not a property tween. `document.startViewTransition()` for same-document DOM swaps (SPA route change, list-to-detail, theme toggle); `@view-transition { navigation: auto }` for cross-document (MPA) navigations — Chromium 126+ and Safari 18.2+ only. Firefox 144 (Oct 2025) shipped same-document view transitions but not cross-document; cross-document transitions still require a