What does the CSS animation-range property control on a scroll-driven animation, and what do named ranges like entry and cover mean?

## Why the property exists On a clock-driven animation you scope the effect with `animation-duration` and `animation-delay`. Neither is meaningful against scroll progress — there are no seconds to allocate. `animation-range` is the replacement: it declares which portion of the timeline the animation's keyframes are stretched across. Outside that portion the animation is in its before- or after-phase, which is why `animation-fill-mode` matters so much here. It is a shorthand for two longhands: - `animation-range-start` — where 0% of the keyframes sits - `animation-range-end` — where 100% of the keyframes sits Both default to `normal`, which means the full timeline. ## Endpoint syntax Each endpoint can be: - **`normal`** — the timeline's own start or end. - **A `<length-percentage>`** — an offset into the timeline, such as `20%` or `400px`. This is the form you use with a scroll progress timeline, which has no named ranges of its own. - **A named range, optionally with an offset** — `entry`, `entry 50%`, `cover 25%`. Named ranges belong to view progress timelines. When you write the shorthand with two values, the first is the start and the second is the end: `animation-range: entry 0% cover 50%`. ## What the names mean All of the named ranges describe the relationship between the **subject** box and the **scrollport** as the subject travels through it. - **`cover`** — the entire passage: from the instant the subject's box first begins to intersect the scrollport, to the instant it has completely left. This is the default extent of a view timeline. - **`entry`** — the arrival phase only: from first touching the scrollport to being fully inside it. - **`exit`** — the departure phase only: from beginning to leave to being completely gone. - **`contain`** — the middle stretch where the subject is fully contained within the scrollport. When the subject is *taller* than the scrollport, containment is impossible, and the range instead covers the period where the subject fully covers the scrollport. - **`entry-crossing`** and **`exit-crossing`** — variants defined by the subject's box crossing the scrollport's end and start edges. For subjects smaller than the scrollport they coincide with `entry` and `exit`; for larger subjects they differ, which is precisely when you reach for them. Adding a percentage picks a point inside that named range: `entry 50%` is the moment the subject is half-way through arriving, not half-way through the whole passage. ## The practical recipe The most common real-world use is a reveal that should be finished by the time the element is properly on screen: ```css .card { animation: fade-up linear both; animation-timeline: view(); animation-range: entry 0% entry 100%; } ``` Without the range, the default `cover` extent means the fade only completes as the card is *leaving* the viewport — an effect that feels permanently unfinished. This is one of the most reported "my scroll animation looks broken" symptoms, and the fix is always the range, never the duration. A parallax-style effect wants the opposite: the whole `cover` range, so the element keeps drifting for its entire passage. ## Fill mode is part of the answer Because `animation-range` deliberately leaves timeline outside the animation, what happens there is determined by `animation-fill-mode`. With the default `none`, the element renders its base styles before the range starts and again after it ends — so a fade-in reverts to transparent after the element passes. `both` holds the first keyframe before and the last keyframe after, which is what a reveal wants. Treat `animation-range` and a deliberate fill mode as a pair. ## Ranges on scroll timelines Named ranges are a view-timeline concept: they are defined by a subject crossing a scrollport, and a scroll progress timeline has no subject. On a `scroll()` timeline you scope with lengths or percentages of the scrollable range instead — `animation-range: 10% 60%` runs the animation over the middle stretch of the page and leaves the first tenth and last forty percent alone. Writing `entry` against a `scroll()` timeline does not give you the effect you are imagining. ## What to say in an interview The crisp framing is: on a time-based animation you choose *when* and *how long*; on a progress-based animation you choose *where*, and `animation-range` is the only tool that does it. Then name `cover` as the default extent and `entry` as the one you reach for nine times out of ten.