animation-range
Sets which part of a scroll timeline the animation occupies — for example, only while the element is entering the screen.
Syntax
animation-range: start end;Values
| Parameter | Type | Description |
|---|---|---|
| normal | keyword | The default: the whole timeline. |
| entry, exit, cover, contain | range name | Named phases of a `view()` timeline: entering, leaving, the whole trip, fully visible. |
| %, length | offset | An offset, alone or after a phase name: `entry 20%`, `200px`. |
Examples
The image grows from 50% to full size while it enters, from the first pixel to halfway in:
<style>
.box { height: 200px; overflow-y: auto; border: 1px solid #ccc; }
.box p { height: 220px; margin: 0; padding: 8px; }
img {
display: block; margin: 0 auto;
animation: zoom linear both;
animation-timeline: view();
animation-range: entry 0% entry 50%;
}
@keyframes zoom { from { scale: 0.5; } }
</style>
<div class="box">
<p>Scroll down.</p>
<img src="/media/photo-200x200.jpg" alt="A photo" width="200" height="200">
<p></p>
</div>Notes
With one value the end is taken from the same phase: animation-range: entry equals entry 0% entry 100%. Like animation-timeline, set it after the animation shorthand, which resets it.
See also
- animation-timeline — Ties a CSS animation to scrolling instead of time: the animation progresses as the page or an element is scrolled.
- 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 — Runs a `@keyframes` animation on an element.
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.