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

estelle · 2025-11-20T09:50:03Z

<timeline-range-name> is in #42020, so will be added around the same time as this.

Merge remote-tracking branch 'upstream/main'

github-actions · 2025-11-20T09:51:51Z

Preview URLs

Flaws (29)

URL: /en-US/docs/Web/CSS/Reference/Properties/animation-range-end
Title: animation-range-end
Flaw count: 14

broken_links:
- /en-US/docs/Web/CSS/CSS_values_and_units/Value_definition_syntax#brackets is a redirect
- /en-US/docs/Web/CSS/CSS_values_and_units/Value_definition_syntax#single_bar is a redirect
- /en-US/docs/Web/CSS/CSS_values_and_units/Value_definition_syntax#single_bar is a redirect
- Can't resolve /en-US/docs/Web/CSS/timeline-range-name
- /en-US/docs/Web/CSS/CSS_values_and_units/Value_definition_syntax#question_mark is a redirect
- and 5 more flaws omitted
macros:
- Macro produces link /en-US/docs/Web/CSS/CSS_cascade/Value_processing which is a redirect
- Macro produces link /en-US/docs/Web/CSS/CSS_cascade/Inheritance which is a redirect
- Macro produces link /en-US/docs/Web/CSS/CSS_cascade/Value_processing which is a redirect
- Macro produces link /en-US/docs/Web/CSS/CSS_animated_properties which is a redirect

URL: /en-US/docs/Web/CSS/Reference/Properties/animation-range-start
Title: animation-range-start
Flaw count: 15

broken_links:
- /en-US/docs/Web/CSS/animation-range is a redirect
- /en-US/docs/Web/CSS/CSS_values_and_units/Value_definition_syntax#brackets is a redirect
- /en-US/docs/Web/CSS/CSS_values_and_units/Value_definition_syntax#single_bar is a redirect
- /en-US/docs/Web/CSS/CSS_values_and_units/Value_definition_syntax#single_bar is a redirect
- Can't resolve /en-US/docs/Web/CSS/timeline-range-name
- and 6 more flaws omitted
macros:
- Macro produces link /en-US/docs/Web/CSS/CSS_cascade/Value_processing which is a redirect
- Macro produces link /en-US/docs/Web/CSS/CSS_cascade/Inheritance which is a redirect
- Macro produces link /en-US/docs/Web/CSS/CSS_cascade/Value_processing which is a redirect
- Macro produces link /en-US/docs/Web/CSS/CSS_animated_properties which is a redirect

External URLs (2)

URL: /en-US/docs/Web/CSS/Reference/Properties/animation-range-end
Title: animation-range-end

https://scroll-driven-animations.style/tools/view-timeline/ranges/ (1 time) (Note! This may be a new URL 👀)

URL: /en-US/docs/Web/CSS/Reference/Properties/animation-range-start
Title: animation-range-start

https://scroll-driven-animations.style/tools/view-timeline/ranges/ (2 times) (Note! This may be a new URL 👀)

(comment last updated: 2025-12-05 16:08:19)

Added global values for the animation-range-end property.

Added global values for animation-range-start property.

dipikabh

Thanks for sending these updates!
I've added my suggestions and feedback

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

dipikabh · 2025-12-02T17:45:40Z

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

+}
+```
+
+We also include conditional styling: when the checkbox is checked, the `animation-fill-mode` property gets applied to the animated element:


Suggested change

We also include conditional styling: when the checkbox is checked, the `animation-fill-mode` property gets applied to the animated element:

When the checkbox is checked, the `animation-fill-mode` property gets applied to the animated element:

dipikabh · 2025-12-02T17:46:31Z

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

+}
+```
+
+The other styles were hidden for the sake of brevity.


Suggested change

The other styles were hidden for the sake of brevity.

Other styles applied in this example have been hidden here for brevity.

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

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

github-actions · 2025-12-05T16:11:01Z

This pull request has merge conflicts that must be resolved before it can be merged.

dipikabh

Thanks for the updates, @estelle!

Two suggestions got missed - #42029 (comment) and #42029 (comment). I've also added a few edits on the animation-range-start page. Leaving my +1 so you can merge when it's ready.

dipikabh · 2025-12-05T16:25:06Z

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

+- {{cssxref("length-percentage")}}
+  - : Specifies 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)
+  - : Specifies a specific named timeline range within the overall timeline. The range starts at `0%`.


seems redundant

Suggested change

- : Specifies a specific named timeline range within the overall timeline. The range starts at `0%`.

- : Specifies a named timeline range within the overall timeline. The range starts at `0%`.

dipikabh · 2025-12-05T16:31:31Z

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

+## Description

-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 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.


Suggested change

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 `animation-range-end` property specifies the end of the animation's attachment range. Changing the end of the attachment range can potentially shift the end of the animation, that is, the point where keyframes mapped to `100%` progress land when the iteration count is `1`, and can also reduce the effective duration of the animation.

dipikabh · 2025-12-05T16:32:50Z

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

+```

-  <div class="subject animation"></div>
+In the middle of a long block of text, we've includes an element that we'll animate. We've added a lot of text to ensure that the content overflows its container; the extra text is hidden here for brevity.


my bad, sorry

Suggested change

In the middle of a long block of text, we've includes an element that we'll animate. We've added a lot of text to ensure that the content overflows its container; the extra text is hidden here for brevity.

In the middle of a long block of text, we've included an element that we'll animate. We've added a lot of text to ensure that the content overflows its container; the extra text is hidden here for brevity.

dipikabh · 2025-12-05T16:38:44Z

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

+- {{cssxref("length-percentage")}}
+  - : Specifies 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)
+  - : Specifies a specific named timeline range within the overall timeline. The range starts at `0%`.


Suggested change

- : Specifies a specific named timeline range within the overall timeline. The range starts at `0%`.

- : Specifies a named timeline range within the overall timeline. The range starts at `0%`.

dipikabh · 2025-12-05T16:46:18Z

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

+In the case of [`<timeline-range-name>`](/en-US/docs/Web/CSS/Reference/Values/timeline-range-name) values that do not include a `<length-percentage>`, the percentage defaults to `0%`.
+
+Allowed values for the `animation-range-start` property 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/animation-range) for a detailed description of the available values.

 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.


These need to be reordered for the appropriate flow of content: 2nd para, then 1st, and then 3rd. They can also all be combined into a single para.

Suggested change

In the case of [`<timeline-range-name>`](/en-US/docs/Web/CSS/Reference/Values/timeline-range-name) values that do not include a `<length-percentage>`, the percentage defaults to `0%`.

Allowed values for the `animation-range-start` property 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/animation-range) for a detailed description of the available values.

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.

Allowed values for the `animation-range-start` property are `normal`, a {{cssxref("length-percentage")}}, a `<timeline-range-name>`, or a `<timeline-range-name>` followed by a `<length-percentage>`. If the [`<timeline-range-name>`](/en-US/docs/Web/CSS/Reference/Values/timeline-range-name) value does not include a `<length-percentage>`, the percentage defaults to `0%`.

See [`animation-range`](/en-US/docs/Web/CSS/animation-range) for a detailed description of the available values.

Also check out the [View progress timeline visualizer](https://scroll-driven-animations.style/tools/view-timeline/ranges/), which shows what the different values mean in an easy-to-follow visual format.

dipikabh · 2025-12-05T16:48:20Z

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

+The `animation-range-start` and {{cssxref("animation-range-end")}} properties can also be set using the {{cssxref("animation-range")}} shorthand property.
+
+The `animation-range-start` is included in the {{cssxref("animation")}} shorthand as a reset-only value. This means that using the `animation` shorthand resets any previously declared `animation-range-start` value of equal or lower specificity to `normal`; the shorthand cannot be used to set a new `animation-range-start` value. When creating [CSS scroll-driven animations](/en-US/docs/Web/CSS/Guides/Scroll-driven_animations), you should declare `animation-range-start` _after_ declaring any `animation` shorthand to avoid resetting the value to `normal`.


Swapping the order here:

Suggested change

The `animation-range-start` and {{cssxref("animation-range-end")}} properties can also be set using the {{cssxref("animation-range")}} shorthand property.

The `animation-range-start` is included in the {{cssxref("animation")}} shorthand as a reset-only value. This means that using the `animation` shorthand resets any previously declared `animation-range-start` value of equal or lower specificity to `normal`; the shorthand cannot be used to set a new `animation-range-start` value. When creating [CSS scroll-driven animations](/en-US/docs/Web/CSS/Guides/Scroll-driven_animations), you should declare `animation-range-start` _after_ declaring any `animation` shorthand to avoid resetting the value to `normal`.

The `animation-range-start` is included in the {{cssxref("animation")}} shorthand as a reset-only value. This means that using the `animation` shorthand resets any previously declared `animation-range-start` value of equal or lower specificity to `normal`; the shorthand cannot be used to set a new `animation-range-start` value. When creating [CSS scroll-driven animations](/en-US/docs/Web/CSS/Guides/Scroll-driven_animations), you should declare `animation-range-start` _after_ declaring any `animation` shorthand to avoid resetting the value to `normal`.

The `animation-range-start`, along with the {{cssxref("animation-range-end")}} property, can also be set using the {{cssxref("animation-range")}} shorthand.

dipikabh · 2025-12-05T16:51:07Z

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

+### Creating a scroll view progress timeline with range start

-An `animation-range-start` declaration is also set to make the animation begin later than expected.
+In this example, the `animation-range-start` is applied to an element animated via a scroll progress timeline. This makes the animation to begin animating well before the element enters the scrollport.


Suggested change

In this example, the `animation-range-start` is applied to an element animated via a scroll progress timeline. This makes the animation to begin animating well before the element enters the scrollport.

In this example, the `animation-range-start` is applied to an element animated via a scroll progress timeline. This makes the animation start well before the element enters the scrollport.

dipikabh · 2025-12-05T16:51:31Z

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

+```

-  <div class="subject animation"></div>
+In the middle of a long block of text, we've includes an element that we'll animate. We've added a lot of text to ensure that the content overflows its container; the extra text is hidden here for brevity.


Suggested change

In the middle of a long block of text, we've includes an element that we'll animate. We've added a lot of text to ensure that the content overflows its container; the extra text is hidden here for brevity.

In the middle of a long block of text, we've included an element that we'll animate. We've added a lot of text to ensure that the content overflows its container; the extra text is hidden here for brevity.

dipikabh · 2025-12-05T16:53:32Z

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

+}
+```
+
+The other styles applied in this example has been hidden here for brevity.


Suggested change

The other styles applied in this example has been hidden here for brevity.

Other styles applied in this example have been hidden here for brevity.

dipikabh · 2025-12-05T17:01:00Z

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

 #### Result

-Scroll to see the subject element being animated.
+Scroll to see the element animate. Notice how the element is 25% of the width of it's final state and semi-opaque as it enters the viewport. This is because the element started animating well before it entered the viewport.


is "25% of the width" correct?

Suggested change

Scroll to see the element animate. Notice how the element is 25% of the width of it's final state and semi-opaque as it enters the viewport. This is because the element started animating well before it entered the viewport.

Scroll to see the element animate. Notice how the element is already scaled and semi-opaque as it enters the viewport. This is because the element started animating well before it entered the viewport.

estelle added 5 commits November 18, 2025 15:15

merge conflict

c4a50f7

revert local issue

feffb7d

Merge remote-tracking branch 'upstream/main'

12df5cf

merge issue

e0a594b

Merge remote-tracking branch 'upstream/main'

rewrite property pages and examples

562fba9

estelle requested a review from a team as a code owner November 20, 2025 09:50

estelle requested review from dipikabh and removed request for a team November 20, 2025 09:50

github-actions bot added Content:CSS Cascading Style Sheets docs size/m [PR only] 51-500 LoC changed labels Nov 20, 2025

estelle and others added 4 commits November 25, 2025 12:07

Merge branch 'main' into rangeStartEnd

207ee58

Add 'your browser does not support' feature to example

de9001f

Add global values to animation-range-end property

60f38c5

Added global values for the animation-range-end property.

Add global values to animation-range-start

c67ae12

Added global values for animation-range-start property.

dipikabh requested changes Dec 2, 2025

View reviewed changes

estelle and others added 3 commits December 5, 2025 14:43

Merge branch 'main' into rangeStartEnd

d14547f

review edits

0e0e039

Merge branch 'main' into rangeStartEnd

02eed94

estelle requested a review from dipikabh December 5, 2025 16:09

github-actions bot added the merge conflicts 🚧 [PR only] label Dec 5, 2025

dipikabh approved these changes Dec 5, 2025

View reviewed changes

	We also include conditional styling: when the checkbox is checked, the `animation-fill-mode` property gets applied to the animated element:
	When the checkbox is checked, the `animation-fill-mode` property gets applied to the animated element:

	The other styles were hidden for the sake of brevity.
	Other styles applied in this example have been hidden here for brevity.

	- : Specifies a specific named timeline range within the overall timeline. The range starts at `0%`.
	- : Specifies a named timeline range within the overall timeline. The range starts at `0%`.

	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 `animation-range-end` property specifies the end of the animation's attachment range. Changing the end of the attachment range can potentially shift the end of the animation, that is, the point where keyframes mapped to `100%` progress land when the iteration count is `1`, and can also reduce the effective duration of the animation.

	In the middle of a long block of text, we've includes an element that we'll animate. We've added a lot of text to ensure that the content overflows its container; the extra text is hidden here for brevity.
	In the middle of a long block of text, we've included an element that we'll animate. We've added a lot of text to ensure that the content overflows its container; the extra text is hidden here for brevity.

		The `animation-range-start` and {{cssxref("animation-range-end")}} properties can also be set using the {{cssxref("animation-range")}} shorthand property.

		The `animation-range-start` is included in the {{cssxref("animation")}} shorthand as a reset-only value. This means that using the `animation` shorthand resets any previously declared `animation-range-start` value of equal or lower specificity to `normal`; the shorthand cannot be used to set a new `animation-range-start` value. When creating [CSS scroll-driven animations](/en-US/docs/Web/CSS/Guides/Scroll-driven_animations), you should declare `animation-range-start` _after_ declaring any `animation` shorthand to avoid resetting the value to `normal`.

	In this example, the `animation-range-start` is applied to an element animated via a scroll progress timeline. This makes the animation to begin animating well before the element enters the scrollport.
	In this example, the `animation-range-start` is applied to an element animated via a scroll progress timeline. This makes the animation start well before the element enters the scrollport.

	The other styles applied in this example has been hidden here for brevity.
	Other styles applied in this example have been hidden here for brevity.

	Scroll to see the element animate. Notice how the element is 25% of the width of it's final state and semi-opaque as it enters the viewport. This is because the element started animating well before it entered the viewport.
	Scroll to see the element animate. Notice how the element is already scaled and semi-opaque as it enters the viewport. This is because the element started animating well before it entered the viewport.

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

Are you sure you want to change the base?

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

Conversation

estelle commented Nov 20, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

github-actions bot commented Nov 20, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

dipikabh left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

dipikabh Dec 2, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

github-actions bot commented Dec 5, 2025

Uh oh!

dipikabh left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

estelle commented Nov 20, 2025 •

edited

Loading

github-actions bot commented Nov 20, 2025 •

edited

Loading

dipikabh Dec 2, 2025 •

edited

Loading