CSS Animations & Transitions
Scroll Animations
Drive animation progress from a scroll container or an element's passage through the scrollport instead of elapsed time. It distinguishes scroll and view timelines, animation ranges, named timelines, progressive enhancement, and motion preferences.
A scroll-driven animation advances because content moves through a scrollport, not because a timer happens to be running. Its progress must remain reversible, optional, and independent from access to the underlying content.
Scroll timelines are useful for progress indicators and spatial reveals when animation progress should remain synchronized with the reader's position. Unlike a time-based animation, progress can move forward or backward as the controlling scroller or observed element changes position. This topic also connects with CSS Animations and Scroll Snap.
Choose a scroll or view timeline
A scroll progress timeline follows a scroller from its start to end. A view progress timeline follows an element as it enters, crosses, and leaves the scrollport.
Example
css
.reading-progress {
position: fixed;
z-index: 10;
inset: 0 0 auto;
height: 0.35rem;
background: #2563eb;
transform-origin: left;
animation: grow linear both;
animation-timeline: scroll(root block);
}
@keyframes grow {
from { scale: 0 1; }
to { scale: 1 1; }
}Animate while an element crosses the viewport
Example
css
.reveal {
animation: reveal linear both;
animation-timeline: view(block);
animation-range: entry 10% cover 35%;
}
@keyframes reveal {
from { opacity: 0; translate: 0 2rem; }
to { opacity: 1; translate: 0 0; }
}animation-range limits the portion of the timeline used by the animation. Declare animation-timeline after the animation shorthand because the shorthand resets the timeline.
Progressive enhancement
The base presentation must remain complete without the timeline. Add scroll-linked movement inside @supports and remove non-essential effects when reduced motion is requested.
Timeline Reference
| Syntax | Purpose | Example |
|---|---|---|
| scroll() | Creates an anonymous scroll timeline. | animation-timeline: scroll() |
| view() | Creates an anonymous view timeline. | animation-timeline: view() |
| scroll-timeline | Names a scroll timeline. | scroll-timeline: --page block |
| animation-range | Limits the active timeline range. | animation-range: entry 0% cover 40% |
Complete Example
Run the complete document below in the Try It editor. Resize the preview or interact with the controls where the example calls for it.
Complete runnable example
html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Scroll Animations example</title>
<style>
* { box-sizing: border-box; }
body {
margin: 0;
padding: 2rem;
font-family: system-ui, sans-serif;
line-height: 1.5;
}
main { max-width: 70rem; margin-inline: auto; }
article, section, aside, form, .card, .panel {
padding: 1rem;
border: 1px solid #cbd5e1;
border-radius: 0.6rem;
}
.reading-progress {
position: fixed;
z-index: 10;
inset: 0 0 auto;
height: 0.35rem;
background: #2563eb;
transform-origin: left;
animation: grow linear both;
animation-timeline: scroll(root block);
}
@keyframes grow {
from { scale: 0 1; }
to { scale: 1 1; }
}
.reveal {
animation: reveal linear both;
animation-timeline: view(block);
animation-range: entry 10% cover 35%;
}
@keyframes reveal {
from { opacity: 0; translate: 0 2rem; }
to { opacity: 1; translate: 0 0; }
}
</style>
</head>
<body>
<div class="reading-progress"></div><main><h1>Scroll the page</h1><div style="min-height:70vh"></div><article class="reveal">This card uses a view progress timeline where supported.</article><div style="min-height:70vh"></div></main>
</body>
</html>Browser Support
Feature | Chrome | Edge | Firefox | Safari |
|---|---|---|---|---|
| animation-timeline | 115 | 115 | Preview | 26 |
| scroll-timeline | 115 | 115 | Preview | 26 |
Versions show the first stable desktop release with unprefixed support. Data source: MDN Browser Compatibility Data 8.0.8. A partial-support note is included where it changes how the example behaves.
Notes
- Test the example with real content, keyboard input, browser zoom, and the narrowest layout your project supports.
- Use a fallback when the support table shows that one of your required browsers predates the feature.
Conclusion
Scroll-driven animations replace elapsed time with scroll or view progress. They work best as progressive enhancement: keep the underlying content visible, limit the active range deliberately, and provide a reduced-motion presentation.
Do not make reading depend on animation support. The unanimated state should expose the complete content, while the timeline adds orientation or restrained visual feedback.