CSS <timeline-range-name> Data Type

The CSS <timeline-range-name> data type represents a named range of a view progress timeline. These keywords identify portions of an element's movement through a scrollport and can be used to control when a scroll-driven animation begins, ends, or reaches a keyframe.

Syntax

The <timeline-range-name> data type accepts the following keywords:

<timeline-range-name> = cover | contain | entry | exit | entry-crossing | exit-crossing

Each keyword identifies a particular portion of a view progress timeline based on the relationship between the subject element and its scrollport.

Timeline Range Values

Value	Description
`cover`	Represents the range during which the subject is progressing across the scrollport, from first contact with one edge until it leaves the opposite edge.
`contain`	Represents the range during which the subject is fully contained within the scrollport, or the scrollport is fully covered by the subject when the subject is larger.
`entry`	Represents the portion of the cover range during which the subject enters the scrollport.
`exit`	Represents the portion of the cover range during which the subject leaves the scrollport.
`entry-crossing`	Represents the range during which the subject crosses the starting edge of the scrollport.
`exit-crossing`	Represents the range during which the subject crosses the ending edge of the scrollport.

cover and contain Ranges

The cover range describes the overall period during which the subject moves through the scrollport. It begins when the subject first starts entering and ends when it finishes leaving.

The contain range describes the portion of the timeline where the subject is fully contained by the scrollport. When the subject is larger than the scrollport, the range instead corresponds to the period during which the subject fully covers the scrollport.

animation-range: cover;
animation-range: contain;

entry and exit Ranges

The entry range covers the portion of the view timeline during which the subject enters the scrollport. The exit range covers the portion during which it leaves.

animation-range: entry;
animation-range: exit;

These ranges make it possible to associate an animation specifically with the appearance or disappearance of an element as the page is scrolled.

Crossing Ranges

The entry-crossing and exit-crossing ranges describe the periods during which the subject crosses the scrollport's start or end boundary.

animation-range: entry-crossing;
animation-range: exit-crossing;

These ranges are especially useful when the subject is larger than the scrollport because they identify the crossing of a specific scrollport edge independently of the complete entry or exit range.

<timeline-range-name> Example

The following example attaches an animation to a view progress timeline and limits the animation to the subject's entry range:

.timeline-example {
  animation-name: reveal;
  animation-timeline: view();
  animation-range: entry;
}
@keyframes reveal {
  from {
    opacity: 0;
    transform: translateY(40px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

Browser Result

Element enters the view timeline

The Browser Result illustrates the subject whose animation can progress while it enters the scrollport. The actual animation is controlled by scrolling rather than elapsed time.

The <timeline-range-name> data type is used by CSS scroll-driven animation features, including:

Specifications

The <timeline-range-name> data type is defined in the Scroll-driven Animations specification.

CSS <timeline-range-name> Data Type