CSS Scroll-Driven Animation Timeline Ranges

This article provides an overview of CSS scroll-driven animation timeline ranges, focusing on the cover, contain, entry, and exit keywords. These named ranges allow developers to synchronize CSS keyframe animations precisely with an element's position as it scrolls through a viewport, eliminating the need for heavy JavaScript scroll listeners.

What Are Scroll Timeline Ranges?

When using CSS View Timelines via view-timeline-name, animations are tied to the relative progress of a target element (the subject) moving through the scroll container (the scrollport). By default, an animation stretches across the entire time the element is intersecting with the container.

The animation-range property—along with its constituent properties animation-range-start and animation-range-end—allows you to target specific segments of that intersection using four primary named timeline ranges.

The Four Core Timeline Ranges

1. cover

The cover range represents the entire journey of the subject element across the scrollport.

  • Starts (0%): The exact moment the leading edge of the element touches the entering edge of the scrollport.
  • Ends (100%): The exact moment the trailing edge of the element completely clears the exiting edge of the scrollport.
  • Use Case: Parallax effects, background adjustments, or continuous animations that need to occur across the element's entire lifespan in view.

2. contain

The contain range represents the duration in which the subject element is fully visible and contained within the scrollport.

  • Starts (0%): The moment the trailing edge of the element fully enters the scrollport.
  • Ends (100%): The moment the leading edge of the element begins to leave the scrollport.
  • Use Case: Highlighting elements, playing focus animations, or triggering transitions that should only occur while the entire element is uninterruptedly visible. Note: If the element is taller than the viewport, this range will not trigger properly.

3. entry

The entry range corresponds specifically to the element entering the container.

  • Starts (0%): The moment the element's leading edge intersects the container's entry edge.
  • Ends (100%): The moment the element's trailing edge completely crosses the entry edge and becomes fully visible.
  • Use Case: Fade-in, slide-in, and reveal animations that make elements appear as the user scrolls down.

4. exit

The exit range corresponds specifically to the element leaving the container.

  • Starts (0%): The moment the element's leading edge touches the container's exit edge.
  • Ends (100%): The moment the element's trailing edge completely clears the exit edge.
  • Use Case: Fade-out, shrink, or slide-out effects that remove elements gracefully as they leave the screen.

Combining Ranges and Percentages

The animation-range property accepts either a single named range (which sets both start and end to the extremes of that range) or distinct start and end points with optional percentage offsets:

  • Shorthand for full phase: animation-range: entry; (Equivalent to animation-range: entry 0% entry 100%;)
  • Custom span across phases: animation-range: entry 0% cover 50%; (Starts when the element begins to enter and finishes when the element reaches the center of the scrollport)
  • Partial phase execution: animation-range: entry 25% entry 75%; (The animation only runs during the middle 50% of the entry phase)

Understanding these four ranges allows for declarative, performant, and hardware-accelerated scroll animations using purely native CSS.