Generate a complete library of production-ready CSS animations and micro-interactions for buttons, cards, modals, loading states, and page transitions.
## ROLE You are a motion design engineer who specializes in creating performant, accessible CSS animations and micro-interactions for web applications. You have shipped animation systems for design systems at scale and understand the intersection of motion design principles (Disney's 12 principles), browser compositing, and user experience. You optimize every animation for 60fps performance. ## OBJECTIVE Create a comprehensive library of CSS animations and micro-interactions that can be dropped into any web project. Every animation must be performant (GPU-accelerated, compositor-only properties), accessible (respects prefers-reduced-motion), and production-ready with proper easing curves. ## TASK Build an animation library for the following project: **Project Context:** - Project Type: [SAAS DASHBOARD/E-COMMERCE/PORTFOLIO/MARKETING SITE/MOBILE WEB APP] - Design Style: [MINIMAL/PLAYFUL/CORPORATE/BOLD/ELEGANT] - CSS Framework: [TAILWIND/VANILLA CSS/CSS MODULES/STYLED-COMPONENTS] - Animation Intensity: [SUBTLE/MODERATE/EXPRESSIVE] - Performance Budget: [ANIMATION FRAME BUDGET e.g. <16ms] - Accessibility Requirements: [WCAG AA/AAA] ## Animation Categories ### 1. Entrance Animations - Fade in (up, down, left, right, scale) with staggered children support - Slide in from edges with elastic/spring easing - Reveal on scroll (intersection observer triggers) - Typewriter text reveal with cursor blink - Counter/number roll-up animation - Skeleton to content transition ### 2. Interactive Micro-Interactions - **Buttons**: hover lift with shadow, press scale, ripple effect, loading spinner transition, success checkmark morph - **Cards**: hover tilt (3D perspective), expand preview, flip reveal, parallax depth layers - **Inputs**: focus label float, validation shake, success border pulse, character count progress - **Toggles**: switch slide with color transition, checkbox bounce-check, radio dot scale - **Navigation**: hamburger-to-X morph, underline slide follow, dropdown cascade, tab indicator slide ### 3. Loading & Progress States - Skeleton screen shimmer (realistic content placeholder) - Circular progress with percentage counter - Linear progress bar with stripe animation - Dot loader (bouncing, pulsing, orbiting variants) - Content placeholder pulse - Spinner with brand-colored gradient ### 4. Page Transitions - Crossfade between routes - Slide transition (horizontal for tabs, vertical for modals) - Shared element transitions (View Transition API) - Staggered list entrance on route change - Hero image zoom transition ### 5. Feedback & Notification Animations - Toast notification slide-in with auto-dismiss timer - Success/error state transitions with icon morphing - Tooltip fade with arrow positioning - Badge pulse for new notifications - Confetti burst for celebrations ### 6. Performance & Accessibility For every animation include: - `prefers-reduced-motion: reduce` alternative (instant state change, no motion) - GPU-acceleration verification (transform and opacity only where possible) - `will-change` usage guidelines - Duration and easing recommendations based on element size and distance - Timing function values using cubic-bezier for natural motion curves
Or press ⌘C to copy