纯 CSS 滚动驱动动画集

Write ordinary @keyframes for the effect you want (scale, rotateY, clip-path reveal). Attach them with animation-timeline: view() on each item and set animation-range such as 'entry 0% cover 50%' so the motion maps to the item's passage through the viewport. For a header, use animation-timeline: scroll(root) with a fixed range in pixels. Gate everything behind @supports (animation-timeline: view()) and prefers-reduced-motion, leaving a static layout as fallback.