CSS property pages: animation-range-start and animation-range-end

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

@@ -8,11 +8,6 @@ sidebar: cssref
 
 The **`animation-range-end`** [CSS](/en-US/docs/Web/CSS) property is used to set the end of an animation's attachment range along its timeline, i.e., where along the timeline an animation will end.
 
-The `animation-range-end` and {{cssxref("animation-range-start")}} properties can also be set using the [`animation-range`](/en-US/docs/Web/CSS/Reference/Properties/animation-range) shorthand property.
-
-> [!NOTE]
-> `animation-range-end` is included in the {{cssxref("animation")}} shorthand as a reset-only value. This means that including `animation` resets a previously-declared `animation-range-end` value to `normal`, but a specific value cannot be set via `animation`. When creating [CSS scroll-driven animations](/en-US/docs/Web/CSS/Guides/Scroll-driven_animations), you need to declare `animation-range-end` after declaring any `animation` shorthand for it to take effect.
-
 ## Syntax
 
 ```css
@@ -30,9 +25,24 @@ animation-range-end: contain 700px;
 
 ### Values
 
-Allowed values for `animation-range-end` are `normal`, a {{cssxref("length-percentage")}}, a `<timeline-range-name>`, or a `<timeline-range-name>` with a `<length-percentage>` following it. See [`animation-range`](/en-US/docs/Web/CSS/Reference/Properties/animation-range) for a detailed description of the available values.
+- `normal`
+  - : Represents the end of the timeline. This is the default value.
+- {{cssxref("length-percentage")}}
+  - : A length or percentage value measured from the beginning of the timeline.
+- [`<timeline-range-name>`](/en-US/docs/Web/CSS/Reference/Values/timeline-range-name)
+  - : A specific named timeline range inside the overall timeline, starting at `0%`.
+- `<timeline-range-name> <length-percentage>`
+  - : A specified percentage or distance through a named timeline range, measured from the start of that timeline range.
+
+## Description
+
+The `animation-range-end` property specifies the end of the animation's attachment range, potentially shifting the end time of the animation (i.e., where keyframes mapped to `100%` progress are attached when the iteration count is 1) and/or reducing the duration of the animation.
+
+The value can be `normal`, a `<length-percentage>`, or a {{cssxref("timeline-range-name")}} with an optional `<length-percentage>`. When the `<timeline-range-name>` value does not include a `<length-percentage>`, the percentage defaults to `100%`.
 
-Also check out the [View Timeline Ranges Visualizer](https://scroll-driven-animations.style/tools/view-timeline/ranges/), which shows exactly what the different values mean in an easy visual format.
+The `animation-range-end` property is included in the {{cssxref("animation")}} shorthand as a reset-only value. This means that including `animation` resets a previously-declared `animation-range-end` value to `normal`, but the `<animation-range-end>` value cannot be set via `animation`. When creating [CSS scroll-driven animations](/en-US/docs/Web/CSS/Guides/Scroll-driven_animations), you should declare `animation-range-end` after declaring any `animation` shorthand to prevent the value from being reset to `normal`.
+
+The `animation-range-end` property (and the {{cssxref("animation-range-start")}} property) can also be set using the {{cssxref("animation-range")}} shorthand property.
 
 ## Formal definition
 
@@ -44,18 +54,13 @@ Also check out the [View Timeline Ranges Visualizer](https://scroll-driven-anima
 
 ## Examples
 
-### Creating a named view progress timeline with range end
-
-A view progress timeline named `--subject-reveal` is defined using the `view-timeline` property on a subject element with a `class` of `animation`.
-This is then set as the timeline for the same element using `animation-timeline: --subject-reveal;`. The result is that the subject element animates as it moves upwards through the document as it is scrolled.
+### Creating a view progress timeline with a range end
 
-An `animation-range-end` declaration is also set to make the animation end earlier than expected.
+In this example, the `animation-range-end` is applied to an element animated via a view progress timeline, setting the animation to reach the last keyframe well before the element reaches the end of it's containing viewport.
 
 #### HTML
 
-The HTML for the example is shown below.
-
-```html
+```html hidden
 <div class="content">
   <h1>Content</h1>
 
@@ -74,34 +79,93 @@ The HTML for the example is shown below.
     Sagittis aliquam malesuada bibendum arcu vitae elementum. Malesuada bibendum
     arcu vitae elementum curabitur vitae nunc sed velit.
   </p>
+</div>
+```
 
-  <div class="subject animation"></div>
+In the middle of a wall of text, we include an element that we will animate. We added a lot of text in to ensure that our content overflows its container, but this was hidden for the sake of brevity.
 
-  <p>
-    Adipiscing enim eu turpis egestas pretium aenean pharetra magna ac. Arcu
-    cursus vitae congue mauris rhoncus aenean vel. Sit amet cursus sit amet
-    dictum. Augue neque gravida in fermentum et. Gravida rutrum quisque non
-    tellus orci ac auctor augue mauris. Risus quis varius quam quisque id diam
-    vel quam elementum. Nibh praesent tristique magna sit amet purus gravida
-    quis. Duis ultricies lacus sed turpis tincidunt id aliquet. In egestas erat
-    imperdiet sed euismod nisi. Eget egestas purus viverra accumsan in nisl nisi
-    scelerisque. Netus et malesuada fames ac.
+```html
+<div class="animatedElement"></div>
+```
+
+```html hidden
+<p>
+  Adipiscing enim eu turpis egestas pretium aenean pharetra magna ac. Arcu
+  cursus vitae congue mauris rhoncus aenean vel. Sit amet cursus sit amet
+  dictum. Augue neque gravida in fermentum et. Gravida rutrum quisque non tellus
+  orci ac auctor augue mauris. Risus quis varius quam quisque id diam vel quam
+  elementum. Nibh praesent tristique magna sit amet purus gravida quis. Duis
+  ultricies lacus sed turpis tincidunt id aliquet. In egestas erat imperdiet sed
+  euismod nisi. Eget egestas purus viverra accumsan in nisl nisi scelerisque.
+  Netus et malesuada fames ac.
+</p>
+<p></p>
+```
+
+We also includes a checkbox to that will toggle the {{cssxref("animation-fill-mode")}} property to demonstrate the effect of this property on shortened animation timelines.
+
+```html
+<label>
+  <input type="checkbox" /> Add <code>animation-fill-mode: forwards;</code>
+</label>
+```
+
+```html hidden
   </p>
 </div>
 ```
 
 #### CSS
 
-The `subject` element and its containing `content` element are styled minimally, and the text content is given some basic font settings:
+A view progress timeline is defined using setting a [`view()`](/en-US/docs/Web/CSS/Reference/Properties/animation-timeline/view) function as the value of the {{cssxref("animation-timeline")}} property. This is declared **after** the {{cssxref("animation")}} shorthand, so as to not reset the longhand property value.
+
+An `animation-range-end` declaration is also set to make the animation end earlier than expected.
 
 ```css
-.subject {
+.animatedElement {
+  background-color: deeppink;
+  animation: appear 1ms linear;
+  animation-timeline: view();
+  animation-range-end: exit 25%;
+}
+
+@keyframes appear {
+  from {
+    background-color: rebeccapurple;
+    opacity: 0;
+    transform: scaleX(0);
+  }
+
+  to {
+    background-color: darkturquoise;
+    opacity: 0.75;
+    transform: scaleX(0.75);
+  }
+}
+```
+
+We also include conditional styling: when the checkbox is checked, the `animation-fill-mode` property gets applied to the animated element:
+
+```css
+:has(:checked) .animatedElement {
+  animation-fill-mode: forwards;
+}
+```
+
+The other styles were hidden for the sake of brevity.
+
+```css hidden
+.animatedElement {
   width: 300px;
   height: 200px;
   margin: 0 auto;
   background-color: deeppink;
 }
 
+:has(:checked) .animatedElement {
+  animation-fill-mode: both;
+}
+
 .content {
   width: 75%;
   max-width: 800px;
@@ -123,39 +187,11 @@ p {
 }
 ```
 
-The `<div>` with the class of `subject` is also given a class of `animation` — this is where `view-timeline` is set to define a named view progress timeline. It is also given an `animation-timeline` name with the same value to declare that this will be the element animated as the view progress timeline is progressed. We also give it an `animation-range-end` declaration to make the animation end earlier than expected.
-
-Last, an animation is specified on the element that animates its opacity and scale, causing it to fade in and size up as it moves up the scroller.
-
-```css
-.animation {
-  view-timeline: --subject-reveal block;
-  animation-timeline: --subject-reveal;
-
-  animation-name: appear;
-  animation-range-end: contain 50%;
-  animation-fill-mode: both;
-  animation-duration: 1ms; /* Firefox requires this to apply the animation */
-}
-
-@keyframes appear {
-  from {
-    opacity: 0;
-    transform: scaleX(0);
-  }
-
-  to {
-    opacity: 1;
-    transform: scaleX(1);
-  }
-}
-```
-
 #### Result
 
-Scroll to see the subject element being animated.
+Scroll to see the element being animated. Toggle the checkbox and scroll again. Note how the element finishes animating 75% of the way through the viewport, and how it returns to its default state at this point when the `animation-fill-mode` property is not applied.
 
-{{EmbedLiveSample("Creating a named view progress timeline with range end", "100%", "480px")}}
+{{EmbedLiveSample("Creating a view progress timeline with a range end", "100%", "480px")}}
 
 ## Specifications
 
@@ -167,10 +203,11 @@ Scroll to see the subject element being animated.
 
 ## See also
 
-- [`animation-timeline`](/en-US/docs/Web/CSS/Reference/Properties/animation-timeline)
-- [`animation-range`](/en-US/docs/Web/CSS/Reference/Properties/animation-range), [`animation-range-start`](/en-US/docs/Web/CSS/Reference/Properties/animation-range-start)
-- [`scroll-timeline`](/en-US/docs/Web/CSS/Reference/Properties/scroll-timeline), [`scroll-timeline-axis`](/en-US/docs/Web/CSS/Reference/Properties/scroll-timeline-axis), [`scroll-timeline-name`](/en-US/docs/Web/CSS/Reference/Properties/scroll-timeline-name)
-- {{cssxref("timeline-scope")}}
-- [`view-timeline-inset`](/en-US/docs/Web/CSS/Reference/Properties/view-timeline-inset)
-- The JavaScript equivalent: The `rangeEnd` property available in {{domxref("Element.animate()")}} calls
-- [CSS scroll-driven animations](/en-US/docs/Web/CSS/Guides/Scroll-driven_animations)
+- {{cssxref("animation-timeline")}}
+- {{cssxref("animation-range")}}
+- {{cssxref("animation-range-start")}}
+- {{cssxref("view-timeline-inset")}}
+- {{domxref("Element.animate()")}} `rangeStart` property
+- [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 ranges visualizer](https://scroll-driven-animations.style/tools/view-timeline/ranges/)