# 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.

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

Level: Master · [More CSS terms at this level](https://www.ask-codey.com/glossary/subjects/css/master)

Updated: September 27, 2026

Source: https://www.ask-codey.com/glossary/scroll-driven-animation