Scroll-driven animation

An animation that moves with scrolling instead of time.

What is a scroll-driven animation?

A scroll-driven animation moves with scrolling instead of time, like a reading progress bar that fills as you scroll down.

@keyframes grow { from { width: 0; } to { width: 100%; } }
.reading-progress { animation: grow linear; animation-timeline: scroll(); }

Level: Master · More CSS terms at this level

Updated September 27, 2026