Animace a micro-interactions design

Vytvoř animation system pro [APLIKACE/WEB]. Typ: [MOBILE/DESKTOP/WATCH]. Use case: [FITNESS/E-COMMERCE/SOCIAL/PRODUCTIVITY]. Struktura: 1) **Animation Principles** - purpose (proč animovat), duration guidelines (150ms fast, 300ms normal, 500ms slow), easing functions (ease-in, ease-out, spring), performance (60 FPS, GPU acceleration), 2) **Micro-interactions Categories** - feedback (button press, toggle), loading states (spinners, skeletons), transitions (page, modal), gestures (swipe, pinch), notifications (toast, badge), 3) **State Transitions** - hover effects, active states, disabled states, focus indicators, loading → success → error flows, 4) **Loading Animations** - skeleton screens (content placeholders), spinners (indeterminate progress), progress bars (determinate), pull-to-refresh, infinite scroll loaders, 5) **Gesture Animations** - swipe gestures (dismiss, navigate), pull gestures (refresh, more options), drag & drop, pinch to zoom, haptic feedback coordination, 6) **Page Transitions** - enter animations (fade, slide, scale), exit animations, shared element transitions, navigation stack animations, modal presentations, 7) **Success/Error States** - checkmark animations, error shake, success confetti/celebration, retry button appearance, 8) **Performance Optimization** - use CSS transforms (not top/left), will-change hints, reduce motion (respect prefers-reduced-motion), avoid layout thrashing, measure with Chrome DevTools, 9) **Motion Tokens** - duration.fast (150ms), easing.spring (cubic-bezier), delay values, stagger delays (for lists), 10) **Code Examples** - CSS keyframes, React Spring examples, Framer Motion, Lottie integration, Reanimated (React Native). Zahrň 10+ practical examples s code.