Timeline attachment

Learn the time range with animation-range.

What is animation-range?

The animation-range property sets the start and end of the animation within its timeline. Its default value is normal, which covers the whole timeline.

With scroll-driven animations you can use named ranges or percentages. For example, animation-range: 0% 50% finishes the animation in the first half of the timeline; named ranges like animation-range: entry 0% cover 30% are also possible.

Range names: cover, contain, entry, exit

For view() timelines, four named ranges describe phases of the element's visibility. entry covers when the element enters the viewport; contain when it is fully visible; exit when it leaves.

cover spans all of these: entry, full visibility, and exit. Use cover when you want one range that covers the whole visibility period of an element.

Exercise Combine entry and exit ranges

Write a CSS block. This block must contain an animation-range declaration that includes both the entry and exit keywords. For example, animation-range: entry 0% exit 100%.

Show example solution

/* visibility range */
.card {
  animation-range: entry 0% exit 100%;
}

Test yourself

What does the animation-range property set?
- The animation's duration in seconds
- The animation's iteration count
- The animation's timing function
- The animation's start and end range in the timeline
Show answer

The animation's start and end range in the timeline — Correct. animation-range sets the animation's start and end range in the timeline.

Write the fully-visible range

/* element fully visible */
animation-range: ____ 0% 100%;

Show answer

/* element fully visible */
animation-range: contain 0% 100%;

Which range name covers the entire visibility period of an element?
- cover
- entry
- contain
- exit
Show answer

cover — Correct. The cover range spans entry, full visibility, and exit in one range.
Match each range name to its meaning

entry

Element enters the viewport
contain

Element is fully visible
exit

Element leaves the viewport
cover

Spans the whole visibility period

Next lesson: Scroll-snap

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies