CSS Animation Patterns

Quick Guide: Transitions carry state changes (hover, focus, a toggled attribute); @keyframes carries motion that loops, auto-plays, or has more than two steps; animation-timeline carries scroll- and viewport-linked progress. Confining animation to transform and opacity keeps the frames on the compositor thread, and every animation gets a prefers-reduced-motion branch.

Detailed Resources:

• examples/core.md — token system, interactive states, entrance, spinner, toast, reduced-motion
• examples/transitions.md — multi-property transitions, staggered delays, accordions, colour, links
• examples/keyframes.md — scroll-driven timelines, @property gradients, typewriter, stagger, clip-path morphs
• reference.md — easing catalogue, property cost table, duration guidance, browser support

Which path applies