animation-timeline
Ties a CSS animation to scrolling instead of time: the animation progresses as the page or an element is scrolled.
Syntax
animation-timeline: scroll() | view() | --name;Values
| Parameter | Type | Description |
|---|---|---|
| auto | keyword | The default: the animation runs on the ordinary time timeline. |
| scroll() | function | Progress follows the scroll position of a scroll container. |
| view() | function | Progress follows how far the element has travelled through the visible area. |
| --name | dashed ident | A named timeline declared with `scroll-timeline` or `view-timeline` on another element. |
Examples
A reading progress bar at the top of a scrolling box:
<style>
.page { height: 160px; overflow-y: auto; border: 1px solid #ccc; }
.bar {
position: sticky; top: 0; height: 6px; background: teal;
transform-origin: left;
animation: grow linear;
animation-timeline: scroll();
}
@keyframes grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.text { height: 600px; padding: 8px; }
</style>
<div class="page">
<div class="bar"></div>
<div class="text">Scroll this box to fill the bar.</div>
</div>Notes
Write animation-timeline after the animation shorthand — the shorthand resets it to auto. A duration is not needed (use auto or leave it out). Supported in Chrome and Edge since 2023 and in Safari 26; in other browsers the element just stays in its normal state, so treat it as an enhancement.
See also
- scroll() — Create anonymous scroll timelines for `animation-timeline`: `scroll()` tracks a scroll container, `view()` tracks the element's own trip through the visible area.
- animation-range — Sets which part of a scroll timeline the animation occupies — for example, only while the element is entering the screen.
- animation — Runs a `@keyframes` animation on an element.
- @keyframes — Describes the steps of an animation that is then started with the `animation` property.
Related recipes
In the tutorial
- Scroll-driven animations — Animations tied to scrolling — animation-timeline with the scroll() and view() functions, a reading progress bar, revealing blocks on scroll, animation-range, browser support and a fallback.