New guide: timeline range names (mdn#42853)

* New guide: timeline range names

* Update files/en-us/web/css/guides/scroll-driven_animations/timeline_range_names/index.md

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>

* typo

* Apply suggestions from code review

Co-authored-by: Chris Mills <chrisdavidmills@gmail.com>

* added exit crossing svg. single svg css

* added exit crossing svg. single svg css

* updates per review

* edits per review

* change from 30/70 to 20/60

* the rest of the updates post review

* edits per review 1

* remove insets

* Delete files/en-us/web/css/guides/scroll-driven_animations/timeline_insets/index.md

* finished, i hope

* edits per review

* Update entry-crossing explanation in documentation

Clarify description of entry-crossing behavior in scroll-driven animations.

---------

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
Co-authored-by: Chris Mills <chrisdavidmills@gmail.com>

Author: 3 people

files/en-us/web/css/guides/scroll-driven_animations/index.md

@@ -141,6 +141,8 @@ Scroll the element in the inline direction to see its background color change. S
 
 - [Scroll-driven animation timelines](/en-US/docs/Web/CSS/Guides/Scroll-driven_animations/Timelines)
   - : Scroll-driven animation timelines and creating scroll-driven animations.
+- [Timeline range names](/en-US/docs/Web/CSS/Guides/Scroll-driven_animations/Timeline_range_names)
+  - : The {{cssxref("timeline-range-name")}} data type: Understanding the various timeline range names.
 
 ## Related concepts
 

files/en-us/web/css/guides/scroll-driven_animations/timeline_range_names/index.md

@@ -360,5 +360,7 @@ Because the `animation` shorthand sets the `animation-timeline` to `auto`, use a
 
 ## See also
 
-- [CSS animations](/en-US/docs/Web/CSS/Guides/Animations)
+- [Understanding timeline range names](/en-US/docs/Web/CSS/Guides/Scroll-driven_animations/Timeline_range_names)
+- [Scroll-driven animations](/en-US/docs/Web/CSS/Guides/Scroll-driven_animations) module
+- [CSS animations](/en-US/docs/Web/CSS/Guides/Animations) module
 - [Web Animations API](/en-US/docs/Web/API/Web_Animations_API)

files/en-us/web/css/guides/scroll-driven_animations/timelines/index.md

@@ -160,6 +160,7 @@ See [Using CSS animations](/en-US/docs/Web/CSS/Guides/Animations/Using) and [scr
 - [Using CSS animations](/en-US/docs/Web/CSS/Guides/Animations/Using)
 - [CSS animations](/en-US/docs/Web/CSS/Guides/Animations) module
 - [CSS scroll-driven animation timelines](/en-US/docs/Web/CSS/Guides/Scroll-driven_animations/Timelines)
+- [Understanding timeline range names](/en-US/docs/Web/CSS/Guides/Scroll-driven_animations/Timeline_range_names)
 - [CSS scroll-driven animations](/en-US/docs/Web/CSS/Guides/Scroll-driven_animations) module
 - [Animate elements on scroll with Scroll-driven animations](https://developer.chrome.com/docs/css-ui/scroll-driven-animations)
 - {{domxref("AnimationEvent")}}

files/en-us/web/css/reference/at-rules/@keyframes/index.md

@@ -226,5 +226,6 @@ Scroll to see the element animate. Then toggle the checkbox at the end of the bl
 - {{cssxref("view-timeline-inset")}}
 - {{domxref("Element.animate()")}} `rangeStart` property
 - [Scroll-driven animation timelines](/en-US/docs/Web/CSS/Guides/Scroll-driven_animations/Timelines)
+- [Understanding timeline range names](/en-US/docs/Web/CSS/Guides/Scroll-driven_animations/Timeline_range_names)
 - [CSS scroll-driven animations](/en-US/docs/Web/CSS/Guides/Scroll-driven_animations) module
 - [View progress timeline: Ranges and animation progress visualizer](https://scroll-driven-animations.style/tools/view-timeline/ranges/)

files/en-us/web/css/reference/properties/animation-range-end/index.md

@@ -202,5 +202,6 @@ Scroll to see the element animate. Notice how the element is already scaled and
 - {{cssxref("view-timeline-inset")}}
 - {{domxref("Element.animate()")}} `rangeStart` property
 - [Scroll-driven animation timelines](/en-US/docs/Web/CSS/Guides/Scroll-driven_animations/Timelines)
+- [Understanding timeline range names](/en-US/docs/Web/CSS/Guides/Scroll-driven_animations/Timeline_range_names)
 - [CSS scroll-driven animations](/en-US/docs/Web/CSS/Guides/Scroll-driven_animations) module
 - [View progress timeline: Ranges and animation progress visualizer](https://scroll-driven-animations.style/tools/view-timeline/ranges/)

files/en-us/web/css/reference/properties/animation-range-start/index.md

@@ -275,5 +275,6 @@ Check the checkbox to apply the `animation-fill-mode` property to the animated e
 - {{cssxref("timeline-scope")}}
 - {{cssxref("view-timeline-inset")}}
 - {{cssxref("animation-fill-mode")}}
+- [Understanding timeline range names](/en-US/docs/Web/CSS/Guides/Scroll-driven_animations/Timeline_range_names)
 - [CSS scroll-driven animations](/en-US/docs/Web/CSS/Guides/Scroll-driven_animations) module
 - [View timeline range visualizer](https://scroll-driven-animations.style/tools/view-timeline/ranges/)

files/en-us/web/css/reference/properties/animation-range/index.md

@@ -198,7 +198,7 @@ Originally defined in the [CSS animation module](/en-US/docs/Web/CSS/Guides/Anim
 }
 ```
 
-If the element's animation timeline does not have a corresponding named view timeline range, then any keyframes attached to points on that named timeline range are ignored. These attachment points may be outside the active interval of the animation. When this occurs, the automatic `from` (`0%`) and `to` (`100%`) keyframes are only generated for properties that don't have keyframes at or earlier than `0%` or at or after `100%`, respectively.
+If the element's animation timeline does not have a corresponding named view timeline range, then any keyframes attached to points on that named timeline range are ignored. These attachment points may be outside the active interval of the animation. When this occurs, the automatic `from` (`0%`) and `to` (`100%`) keyframes are only generated for properties that don't have keyframes at or earlier than `0%` or at or after `100%`, respectively. See the [timeline range name guide](/en-US/docs/Web/CSS/Guides/Scroll-driven_animations/Timeline_range_names) for more information.
 
 ## Examples
 
@@ -375,6 +375,7 @@ The `background-color` and `outline-width` properties are set in `30%` and `40%`
 - {{cssxref("@keyframes")}}
 - {{cssxref("animation")}}
 - {{cssxref("animation-range")}}
+- [Understanding timeline range names](/en-US/docs/Web/CSS/Guides/Scroll-driven_animations/Timeline_range_names)
 - [Using CSS animations](/en-US/docs/Web/CSS/Guides/Animations/Using)
 - [CSS animations](/en-US/docs/Web/CSS/Guides/Animations) module
 - [CSS scroll-driven animations](/en-US/docs/Web/CSS/Guides/Scroll-driven_animations)

files/en-us/web/css/reference/selectors/keyframe_selectors/index.md

@@ -61,6 +61,7 @@ See the [View timeline range visualizer](https://scroll-driven-animations.style/
 - {{cssxref("animation-timeline")}}
 - {{cssxref("scroll-timeline")}}
 - {{cssxref("view-timeline-inset")}}
+- [Understanding timeline range names](/en-US/docs/Web/CSS/Guides/Scroll-driven_animations/Timeline_range_names)
 - [Scroll-driven animation timelines](/en-US/docs/Web/CSS/Guides/Scroll-driven_animations/Timelines)
 - [CSS scroll-driven animations](/en-US/docs/Web/CSS/Guides/Scroll-driven_animations) module
 - [View timeline range visualizer](https://scroll-driven-animations.style/tools/view-timeline/ranges/)