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