Post

In CSS, the initial value for `animaton-range-*` is `normal`. developer.mozilla.org/en-US/docs/W.... My question is: does `normal` always mean `cover 0%` / `cover 100%`, so can we substitute `normal` for `cover` in discussions, or might it have some other meaning? Anyone know? @bram.us maybe?

developer.mozilla.organimation-range-start CSS property - CSS | MDNThe animation-range-start CSS property sets the point on the timeline where an animation should start.

Bramus

@bram.us

For ScrollTimeline-driven animations the `normal` shorthand expands to an animation-range-start of 0% and animation-range-end of 100%. For ViewTimeline-driven animations, it means `cover 0% cover 100%` indeed Also see ep4 of my Scroll-Driven Animations video course: www.youtube.com/watch?v=L1pG...

youtube.comCore Concepts: Timeline Ranges Demystified | Unleash the power of Scroll-Driven Animations (4/10)YouTube video by Chrome for Developers

1/6/26, 9:37 am1 repost2 likes

Bramus

@bram.us

1 June

New as of recently is a named range named `scroll`. So `normal normal` for ScrollTimeline-based animations could also be rewritten as `scroll 0% scroll 100%` (in addition to the `0% 100%`)