| description | Use when designing or implementing hover, focus, and press feedback on buttons, links, and cards; choreographing entrance / exit animations for modals, popovers, dropdowns, list items, or any dynamic content; choosing an easing curve (Material standard, smooth ease-out, sharp / mechanical, bouncy); building a staggered reveal across a list of cards; ensuring motion respects `prefers-reduced-motion`; or transitioning between a `display: none` and a visible state (which by default does NOT animate). Use when reviewing CSS for the classic micro-interaction sins : bare `ease` keyword, animating `width` instead of `transform`, motion that ignores `prefers-reduced-motion`, hover-only feedback with no `:focus-visible` equivalent, or a `display: none` transition that silently never fires. Prevents the seven dominant micro-interaction failures : motion always-on without a `prefers-reduced-motion: reduce` guard (vestibular harm, WCAG 2.3.3 violation); bouncy easing on serious actions ("Delete" button bouncing); transitions longer than 400 ms for utility interactions (feels sluggish); animating colors via `rgb()` (banding in dark transitions, use `oklch()` for perceptually-uniform interpolation); `animation-delay` without `animation-fill-mode: both` causing flicker before the first keyframe; transitions on a `display: none` toggle silently not firing (the property is discrete and needs `transition-behavior: allow-discrete` plus `@starting-style`); and `:hover`-only feedback with no `:focus-visible` equivalent leaving keyboard users with nothing. Covers the canonical timing tokens (100 ms feedback, 150 ms ease- out for hover, 200 to 250 ms entrance, 300 ms maximum for a large surface), the four canonical easing curves (Material `cubic-bezier(0.2, 0, 0, 1)` for standard ease-out, smooth pop `cubic-bezier(0.16, 1, 0.3, 1)` for entrances, `linear` for fixed-distance mechanical feedback, spring approximations via `@keyframes` for bouncy), the `:active` press-state compression (`transform: scale(0.97)` for buttons, `0.99` for cards), the cross-component choreography pattern via `:has()` (parent reactive to descendant hover/focus state), staggered children via custom-property index plus `transition-delay`, `@starting-style` (Baseline 2024) for entrance animations on first paint or post- `display: none`, `transition-behavior: allow-discrete` for animating `display`, `content-visibility`, and `overlay`, plus the WCAG 2.3.3 and 2.2.2 alignment of `prefers-reduced-motion: reduce`. Keywords: micro-interactions, hover transition, focus transition, press feedback, button press, scale 0.97, transition, animation, @keyframes, cubic-bezier, easing, easing function, ease-out, ease-in, linear, Material easing, smooth pop, spring easing, animation-delay, animation-fill-mode both, transition-delay, stagger, choreography, --index custom property, prefers-reduced-motion, reduced motion, vestibular, WCAG 2.3.3, WCAG 2.2.2, @starting-style, transition-behavior, allow-discrete, display transition, popover entrance animation, :has parent reactive, :focus-visible hover parity, animation jarring, transition not firing, motion makes me sick, stagger looks broken, hover feels flat, press has no feedback, motion does not respect setting, button does not feel good, display none does not animate, how to add hover animation, what easing should I use, how to respect reduced motion, how do I stagger a list, how to animate display none, how to make a button feel good to click, how to animate entrance, accessible motion.
|
