Scroll-Driven Animation: The Scroll Is the Clock
A scroll-driven animation is an ordinary @keyframes animation with its clock swapped out: animation-timeline: view() replaces time with the element's own trip through its scroller. Nothing fires, nothing needs teardown, and it runs on the compositor. animation-range picks which slice of that trip the keyframes get: cover, entry, exit, contain. Rings and cards pin with position: sticky and read scroll(), since view() times an element against travel a pinned box no longer has. Rows stagger inside entry, since animation-delay is a length of time and this timeline has none. Stats counts through a registered @property holding an integer. Two traps: animation-timeline goes after the animation shorthand, which resets it, and @supports has to land everything finished where scroll timelines are missing.