Scroll-linked effects used to require IntersectionObserver hacks or heavy JavaScript libraries. The new animation-timeline CSS property lets you bind any @keyframes animation directly to scroll progress. The browser handles all the interpolation on the compositor thread — buttery smooth, zero JavaScript.

Two Timeline Types

Use scroll() for progress-based animations tied to a scroll container, or view() for animations that trigger as an element enters and exits the viewport. Both compose with existing CSS animations — you write keyframes once and swap the timeline.