New guide: timeline range names

[estelle]

Creates a new guide
Links to the guide
added two guides to the sidebar
crosslinking

This guide is really about names. I am currently working on another guide, which should be ready in a few weeks. #42105 #43587 that covers insetting view timelines. I pulled out the named ranges because it was getting overwhelming.

[github-actions]

Preview URLs (9 pages)

• /en-US/docs/Web/CSS/Guides/Scroll-driven_animations/Timeline_range_names
• /en-US/docs/Web/CSS/Guides/Scroll-driven_animations/Timelines
• /en-US/docs/Web/CSS/Guides/Scroll-driven_animations
• /en-US/docs/Web/CSS/Reference/At-rules/@keyframes
• /en-US/docs/Web/CSS/Reference/Properties/animation-range-end
• /en-US/docs/Web/CSS/Reference/Properties/animation-range-start
• /en-US/docs/Web/CSS/Reference/Properties/animation-range
• /en-US/docs/Web/CSS/Reference/Selectors/Keyframe_selectors
• /en-US/docs/Web/CSS/Reference/Values/timeline-range-name

Flaws (1)

Note! 8 documents with no flaws that don't need to be listed. 🎉

Found an unexpected or unresolvable flaw? Please report it here.

URL: /en-US/docs/Web/CSS/Reference/At-rules/@keyframes
Title: @keyframes
Flaw count: 1

• broken_links:
  • Link /en-US/docs/Web/CSS/Reference/Values/qualified-rule-list doesn't resolve

(comment last updated: 2026-03-29 14:50:43)

[estelle]

Hi @chrisdavidmills I removed all non-0 and non-100 progress points. There are a few sentences that are commented out. These will be uncommented in the insets pull request, which I am starting on working on now, but is based on the stuff i pulled out of this guide.

[chrisdavidmills]

@estelle so much better — this makes a lot more sense now, so the new comments are mainly just typos and grammar cleanup. There are a few bits where I think it is still hard to parse, but I know what it is trying to say now, in most cases.

[chrisdavidmills]

I'm not sure we need this paragraph. It seems to mostly repeat what was said before. The last bit is useful. You could maybe delete this and then add "This means the animation attachment range is the size of the subject, and not clamped at the scrollport size." to the end of the previous sentence?

[estelle]

webt with

The entry-crossing produces the same results as entry when the element is equal to or smaller than the scrollport, but when the element is larger than the scrollport, the 100% occurs later, occurring only when the end edge has entered the view port.
The animation attachment range is the size of the subject, and not clamped to the size of the scrollport.

[chrisdavidmills]

@estelle Looks mostly OK. Maybe just update it to say "The entry-crossing range produces the same results..."

[chrisdavidmills]

@estelle Looking good! Just one more comment for you to consider, after which merging awaits!