transitions

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. Under prefers-reduced-motion: reduce, collapse animations to fast opacity fades — never delete feedback entirely.
7. Emit the library. motion.css (tokens + patterns) and a trigger snippet (IntersectionObserver scroll-ins, class-toggle helpers), with a one-line usage note per pattern: what it is for, what it must never be used for.

Output format

/* motion.css — tokens */
:root {
  --motion-fast: 120ms;
  --motion-base: 200ms;
  --motion-slow: 320ms;
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --ease-decelerate: cubic-bezier(0, 0, 0, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
}
/* enter — use for: content appearing; never for: hover feedback */
.enter-rise { animation: rise var(--motion-slow) var(--ease-decelerate) both; }
@keyframes rise { from { opacity: 0; transform: translateY(8px); } }
/* stagger — set style="--i: n" per item; cap the cascade at 400ms */
.stagger > * { animation-delay: calc(var(--i, 0) * 35ms); }
/* reduced motion — feedback stays, movement goes */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 1ms !important;
    transition-duration: 80ms !important;
  }
}