transitionslisted

# Transitions — Motion Artist > "CSS motion library" ## When to use - A UI works but feels dead or abrupt — "make it feel alive", "everything just pops in". - Motion exists but is chaotic — "every component animates differently, unify it". - Specific effects are requested — "animate this modal / dropdown / list / page load". - Accessibility review flagged motion — "we need prefers-reduced-motion support". ## Workflow 1. **Audit what changes.** List every state change in the UI — appear, disappear, reorder, attention. Motion attaches to changes, not to components. 2. **Define duration tokens.** `--motion-fast: 120ms` for micro-feedback (hover, press), `--motion-base: 200ms` for most transitions, `--motion-slow: 320ms` for entrances and large surfaces. Exits run roughly 20% faster than their enters. 3. **Define easing tokens.** Standard `cubic-bezier(0.2, 0, 0, 1)` for most moves; decelerate `cubic-bezier(0, 0, 0, 1)` for entrances; spring `cubic-bezier(0.34, 1.56, 0.64, 1)` reserved for playful emphasis — at most once per view. 4. **Build the pattern set.** Enter: fade-rise 8px, scale-in 0.96→1. Exit: fade-fall, faster. Emphasis: one pulse, or one shake for errors — never looping. Only `transform` and `opacity` ever animate; layout properties are off-limits. 5. **Set stagger rules.** Lists stagger 30–40ms per item, total capped at 400ms; past ten items, stagger the first eight and land the rest together. 6. **Write the reduced-motion fallback.** Un