ui-animation

Design, implement, and review UI animations with accessibility and performance best practices. Named curves Avoid ease-in for UI. Prefer custom curves from easing.dev . Copy and track this checklist: - Covers CSS transitions, keyframes, Framer Motion, and spring animations with guidance on easing curves, timing (200–300ms standard), and transform-based motion - Enforces prefers-reduced-motion support, touch-device hover handling, and keyboard interaction rules to ensure accessible motion - Provides anti-patterns to avoid: transition: all , layout property animation, permanent will-change , and unmotivated entrance animations - Includes performance optimization rules: animate only transform and opacity , pause off-screen loops, and toggle will-change conditionally - Animate for feedback, orientation, continuity, or deliberate delight. - Never animate keyboard-initiated actions (shortcuts, arrow navigation, tab/focus). - Prefer CSS transitions for interruptible UI; use keyframes only for predetermined sequences. - CSS transitions > WAAPI > CSS keyframes > JS (requestAnimationFrame). - Make animations interruptible and input-driven.