CSS Animation Patterns

Quick Guide: Use CSS transitions for state changes (hover, focus), @keyframes for autonomous/looping animations, scroll-driven animations for scroll-linked effects. Animate only transform and opacity for 60fps. Always respect prefers-reduced-motion.

<critical_requirements>

CRITICAL: Before Using This Skill

All code must follow project conventions in CLAUDE.md (kebab-case, named exports, import ordering, import type, named constants)

(You MUST animate ONLY transform and opacity for GPU-accelerated 60fps performance)

(You MUST respect prefers-reduced-motion using @media (prefers-reduced-motion: no-preference) for opt-in or @media (prefers-reduced-motion: reduce) for opt-out)

(You MUST use CSS custom properties for ALL timing values - NO magic numbers like 0.3s)

(You MUST use ease-out for enter animations and ease-in for exit animations - NEVER linear for UI transitions)