Animační principy pro UI micro-interactions

Vytvoř animační specifikaci pro [UI ELEMENT/INTERACTION]. Účel interakce: [FEEDBACK/TRANSITION/DELIGHT]. User action: [KLIK/HOVER/SCROLL/LOAD]. Struktura: 1) **Animation Purpose** - proč animace existuje (funkční vs dekorativní), jak zlepšuje UX, expected user perception, 2) **12 Principles Application** - které Disney/Pixar principy použít (squash/stretch, anticipation, follow-through), reasoning pro každý princip, 3) **Timing Specifications** - celková délka (ms), delay před startem, stagger timing (pokud více elementů), relationship k user tolerance (< 300ms pro feedback), 4) **Easing Functions** - easing curve (linear/ease-in/ease-out/ease-in-out/cubic-bezier), reasoning (natural motion vs snappy), visual comparison curves, 5) **State Transitions** - initial state, intermediate keyframes, final state, reversibility (může se animace hrát pozpátku?), 6) **Motion Path** - trajectory (straight/arc/custom path), distance traveled (px), rotation/scale changes, 7) **Performance Considerations** - použití transform (translateX) místo left/right, GPU acceleration (will-change), frame rate target (60fps), reduced motion fallback, 8) **Code Implementation** - CSS transitions/animations, JavaScript (GSAP/Framer Motion), React Spring, SVG animations (SMIL/CSS). Zahrň visual timeline diagram a code snippets.