CSS Animation & Transition Library

You are a frontend animation specialist who creates smooth, performant, and accessible animations for modern web applications. Design a comprehensive animation system for the following project.

Project Details:
Project Type: [MARKETING SITE/WEB APP/E-COMMERCE/PORTFOLIO/SAAS]
Design Style: [MINIMAL/PLAYFUL/CORPORATE/BOLD/ELEGANT]
Performance Priority: [HIGH PERFORMANCE/BALANCED/RICH ANIMATIONS]
Framework: [REACT/VUE/SVELTE/VANILLA/NEXT.JS]
Animation Library Preference: [CSS ONLY/FRAMER MOTION/GSAP/ANIME.JS/NONE YET]
Accessibility Requirements: [WCAG AA/WCAG AAA/BASIC]

Section 1 - Animation Design Tokens and Timing System:
Define the animation timing scale establishing standard durations for micro-interactions at 100 to 200 milliseconds, element transitions at 200 to 400 milliseconds, page transitions at 300 to 500 milliseconds, and complex orchestrated sequences at 500 to 1000 milliseconds. Create the easing function library including standard ease-out for entrances, ease-in for exits, ease-in-out for state changes, and custom cubic-bezier curves for brand-specific motion personality. Establish the motion principles that guide all animation decisions including purposefulness where every animation communicates something meaningful, responsiveness where interactions feel immediate, and continuity where transitions maintain spatial context. Define the CSS custom properties system for animation tokens that components consume ensuring consistent timing and easing across the entire application. Address how spring-based easing values should be defined for animations using Framer Motion or CSS spring functions for a more natural physical feel.

Section 2 - Micro-Interaction Patterns:
Create the button interaction system including hover scale or background transitions, active press feedback, loading state animations with spinner or progress indicators, and success or error confirmation animations. Define the form field interactions including focus ring animations, label float transitions, validation feedback with shake or color change effects, and password strength indicator animations. Establish the toggle and switch animation patterns including the sliding knob transition, color change interpolation, and icon morphing for state changes. Specify the tooltip and popover entrance animations including fade and scale from the trigger point with proper transform-origin settings. Address the skeleton loading animation system using gradient shimmer effects with proper color values that work in both light and dark modes.

Section 3 - Page and Route Transition System:
Design the page transition architecture specifying how entering and exiting pages animate simultaneously using either CSS view transitions API or a framework-specific animation library. Create the shared element transition patterns where elements like cards or images appear to move between pages by animating from their source position to their destination position. Define the staggered content entrance system where page elements animate in sequentially with increasing delays creating a cascading reveal effect that draws the user eye through the content hierarchy. Specify the navigation direction awareness system where forward navigation slides content from right to left and backward navigation reverses the direction to maintain spatial mental models. Address the loading state transitions between route changes including how to use a progress bar, skeleton screens, or cross-fade techniques to maintain visual continuity during data fetching.

Section 4 - Scroll-Driven Animations:
Define scroll-triggered entrance animations using Intersection Observer to add animation classes when elements enter the viewport with options for fade-up, fade-in, slide-from-left, and scale-up variations. Create the parallax scrolling system using CSS scroll-driven animations or transform translations tied to scroll position for background layers, hero images, and decorative elements. Establish the scroll progress indicator patterns including a reading progress bar, section-based progress dots, and number or percentage counters that update as the user scrolls. Specify the sticky element animation patterns where headers transform on scroll from expanded to compact, where sidebar elements animate into view at scroll thresholds, and where call-to-action buttons appear after scrolling past key content. Address how to implement scroll-driven animations using the new CSS scroll-timeline and animation-timeline properties for browsers that support them with fallback approaches for those that do not.

Section 5 - Complex Animation Orchestration:
Create the animation sequence system for orchestrating multiple elements including stagger utilities that calculate delay offsets, timeline controllers that coordinate parallel and sequential animations, and event-based triggers that chain animations together. Define the data visualization animation patterns including chart drawing animations where bars grow and lines trace, number counting animations that interpolate between values, and progress ring animations for circular progress indicators. Establish the notification and toast animation system with entrance from the edge, stacking behavior when multiple notifications appear, and exit animations that handle both manual dismissal and auto-dismiss timing. Specify the modal and dialog animation patterns including backdrop fade, content scale and fade entrance, and the reverse sequence for closing with proper focus management during transitions. Address the gesture-based animation patterns including swipe to dismiss, drag to reorder with spring-back behavior, and pinch to zoom with momentum and boundary constraints.

Section 6 - Performance and Accessibility:
Define the performance rules requiring all animations to use only compositor-friendly properties including transform and opacity while avoiding layout-triggering properties like width, height, top, and left. Specify the will-change usage guidelines including when to add will-change before animations start and when to remove it after animations complete to avoid excessive memory consumption. Create the prefers-reduced-motion implementation strategy that respects user system preferences by disabling motion animations while maintaining functionality including replacing slide transitions with instant cuts and fade animations with reduced-opacity cross-fades. Establish the GPU acceleration strategy for complex animations including how to promote elements to their own compositor layers using translateZ or will-change and how to monitor layer count and GPU memory usage. Address the testing approach for animations including how to verify animations work correctly at different frame rates, how to test reduced motion variants, and how to use browser developer tools to identify animations that cause jank or layout thrashing.