What problem does it solve? Modern CSS features like scroll-driven animations, the View Transitions API, and @starting-style can replace JavaScript animation libraries for many common UI effects, but developers often reach for heavy dependencies because they lack clear guidance on when native CSS suffices and how to implement it with proper fallbacks. ## Core Features & Use Cases - Decision Framework: A comparison table clarifies when to use CSS native techniques versus GSAP, Framer Motion, or other libraries based on animation complexity. - Native Animation Patterns: Ready-to-use code for scroll-driven animations (animation-timeline, animation-range), same-document and cross-document View Transitions, @starting-style enter/exit animations, anchor positioning for tooltips, and container-query-driven contextual animations. - Fallbacks & Accessibility: A reference module covers browser support tables, @supports-based progressive enhancement strategies, prefers-reduced-motion handling, and GPU compositing performance guidance. - Use Case: You need a scroll-triggered reveal animation and an animated popover tooltip on a marketing page. Instead of adding a 50KB animation library, you apply animation-timeline for the reveal and @starting-style with anchor positioning for the tooltip, with graceful degradation in older browsers. ## Quick Start Ask the agent to add a scroll-driven fade-in reveal animation to a page section using pure CSS with a fallback for unsupported browsers.
