From 35ac7f805255c49faa9458d35ebf11b4b87d2c8b Mon Sep 17 00:00:00 2001
From: Chris Mills
Date: Mon, 8 Dec 2025 09:20:53 +0000
Subject: [PATCH 01/11] Fx147 supports -webkit-perspective with unitless values
(#42275)
---
files/en-us/mozilla/firefox/releases/147/index.md | 5 ++++-
1 file changed, 4 insertions(+), 1 deletion(-)
diff --git a/files/en-us/mozilla/firefox/releases/147/index.md b/files/en-us/mozilla/firefox/releases/147/index.md
index 2dc3ac9cac11ea6..394b3140175741c 100644
--- a/files/en-us/mozilla/firefox/releases/147/index.md
+++ b/files/en-us/mozilla/firefox/releases/147/index.md
@@ -32,7 +32,10 @@ Firefox 147 is the current [Nightly version of Firefox](https://www.firefox.com/
-
+### CSS
+
+- The `-webkit-` prefixed version of the {{cssxref("perspective")}} property is now supported with unitless values — for example `-webkit-perspective: 800` — for increased compatibility.
+ ([Firefox bug 1362499](https://bugzil.la/1362499)).
From 8b13a763f6e4e5430671861bb686de5d9ad3bb9c Mon Sep 17 00:00:00 2001
From: Muhammad Zaeem Khaliq <57555591+ZaeemKhaliq@users.noreply.github.com>
Date: Mon, 8 Dec 2025 14:40:50 +0500
Subject: [PATCH 02/11] fix typo: change 'gradients' to 'gradians' (#42240)
---
.../web/css/reference/values/gradient/conic-gradient/index.md | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/files/en-us/web/css/reference/values/gradient/conic-gradient/index.md b/files/en-us/web/css/reference/values/gradient/conic-gradient/index.md
index a5e4a7690093561..fa6c1b622e23b4d 100644
--- a/files/en-us/web/css/reference/values/gradient/conic-gradient/index.md
+++ b/files/en-us/web/css/reference/values/gradient/conic-gradient/index.md
@@ -116,7 +116,7 @@ The conic-gradient syntax is similar to the radial-gradient syntax, but the colo

-A conic gradient is specified by indicating a rotation angle, the center of the gradient, and then specifying a list of color-stops. Unlike linear and radial gradients, whose color-stops are placed by specifying a {{cssxref("length")}}, the color-stops of a conic gradient are specified with an [angle](/en-US/docs/Web/CSS/Reference/Values/angle). Units include `deg` for degrees, `grad` for gradients, `rad` for radians, and `turn` for turns. There are 360 degrees, 400 gradians, 2π radians, and 1 turn in a circle. Browsers supporting conic gradients also accept percent values, with 100% equaling 360 degrees, but this is not in the specification.
+A conic gradient is specified by indicating a rotation angle, the center of the gradient, and then specifying a list of color-stops. Unlike linear and radial gradients, whose color-stops are placed by specifying a {{cssxref("length")}}, the color-stops of a conic gradient are specified with an [angle](/en-US/docs/Web/CSS/Reference/Values/angle). Units include `deg` for degrees, `grad` for gradians, `rad` for radians, and `turn` for turns. There are 360 degrees, 400 gradians, 2π radians, and 1 turn in a circle. Browsers supporting conic gradients also accept percent values, with 100% equaling 360 degrees, but this is not in the specification.
Similar to radial gradients, the conic gradient syntax provides for positioning the center of the gradient anywhere within, or even outside, the image. The values for the position are similar to the syntax for 2-value background-position.
From ae4577f45feb1515c2b887255c45ce0694dbb676 Mon Sep 17 00:00:00 2001
From: Tom Schuster
Date: Mon, 8 Dec 2025 12:05:22 +0100
Subject: [PATCH 03/11] Fix wrong name in SanitizerConfig (#42284)
---
files/en-us/web/api/sanitizerconfig/index.md | 4 ++--
1 file changed, 2 insertions(+), 2 deletions(-)
diff --git a/files/en-us/web/api/sanitizerconfig/index.md b/files/en-us/web/api/sanitizerconfig/index.md
index f70f4a506685fc4..83cb5d8bed92610 100644
--- a/files/en-us/web/api/sanitizerconfig/index.md
+++ b/files/en-us/web/api/sanitizerconfig/index.md
@@ -195,7 +195,7 @@ const sanitizer1 = new Sanitizer({
});
```
-Invalid because {{htmlelement("span")}} is in both `elements` and `removeElements`.
+Invalid because {{htmlelement("span")}} is in both `elements` and `replaceWithChildrenElements`:
```js
const sanitizer2 = new Sanitizer({
@@ -213,7 +213,7 @@ const sanitizer3 = new Sanitizer({
});
```
-Invalid because it has `removeAttributes` and `dataAttributes` defined.
+Invalid because it has `removeAttributes` and `dataAttributes` defined:
```js
const sanitizer4 = new Sanitizer({
From 6aa7c99917d9d6209baca3310a139cb9536da7a7 Mon Sep 17 00:00:00 2001
From: Estelle Weyl
Date: Mon, 8 Dec 2025 12:38:15 +0100
Subject: [PATCH 04/11] Revise examples and descriptions for ::details-content
(#42244)
* Revise examples and descriptions for ::details-content
Updated examples and descriptions for the ::details-content pseudo-element to improve clarity and consistency.
* Update files/en-us/web/css/reference/selectors/_doublecolon_details-content/index.md
Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
* Update files/en-us/web/css/reference/selectors/_doublecolon_details-content/index.md
Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
* Apply suggestions from code review
Co-authored-by: Chris Mills
---------
Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
Co-authored-by: Chris Mills
---
.../_doublecolon_details-content/index.md | 22 ++++++++++++++-----
1 file changed, 17 insertions(+), 5 deletions(-)
diff --git a/files/en-us/web/css/reference/selectors/_doublecolon_details-content/index.md b/files/en-us/web/css/reference/selectors/_doublecolon_details-content/index.md
index 0b45280f2a5cc43..f97aa6067c6e96c 100644
--- a/files/en-us/web/css/reference/selectors/_doublecolon_details-content/index.md
+++ b/files/en-us/web/css/reference/selectors/_doublecolon_details-content/index.md
@@ -39,10 +39,12 @@ selector::details-content
### Basic example
-In this example the `::details-content` pseudo-element is used to set a {{cssxref("background-color")}} on the content of the {{HTMLElement("details")}} element.
+This example demonstrates basic usage of the `::details-content` pseudo-element to style the content of a {{HTMLElement("details")}} element.
#### HTML
+Our `` element includes a {{HTMLElement("summary")}} element, whose contents will always be visible. The details content includes a {{HTMLElement("p")}} element.
+
```html
Click me
@@ -52,6 +54,8 @@ In this example the `::details-content` pseudo-element is used to set a {{cssxre
#### CSS
+We set a {{cssxref("background-color")}} on the `::details-content` pseudo-element:
+
```css
details::details-content {
background-color: #a29bfe;
@@ -60,17 +64,18 @@ details::details-content {
#### Result
+Click on the summary to view the detail contents.
+
{{EmbedLiveSample("Basic_example", "100%", 150)}}
### Transition example
-In this example the `::details-content` pseudo-element is used to set a {{cssxref("transition")}} on the content of the {{HTMLElement("details")}} element so that it smoothly fades into view when expanded, and fades out again when collapsed. To achieve this, two separate transitions are specified inside the `transition` shorthand property:
-
-- The {{cssxref("opacity")}} property is given a basic transition over `600ms` to create the fade-in/fade-out effect.
-- The {{cssxref("content-visibility")}} property (which is toggled between `hidden` and `visible` when the `` content is expanded/collapsed) is also given a basic `600ms` transition, but with the {{cssxref("transition-behavior")}} value `allow-discrete` specified. This opts the browser into having a transition started on `content-visibility`, the animation behavior of which is [discrete](/en-US/docs/Web/CSS/Guides/Animations/Animatable_properties#discrete). The effect is that the content is visible for the entire duration of the transition, allowing other transitions to be seen. If this transition was not included, the content would immediately disappear when the `` content was collapsed — you wouldn't see the smooth fade-out.
+In this example the `::details-content` pseudo-element is used to set a transition on the content of the {{HTMLElement("details")}} element so that it smoothly fades into view when expanded, and fades out again when collapsed.
#### HTML
+The HTML is the same as in the previous example.
+
```html
Click me
@@ -80,6 +85,11 @@ In this example the `::details-content` pseudo-element is used to set a {{cssxre
#### CSS
+To achieve our transition, we specify two separate transitions inside the {{cssxref("transition")}} shorthand property:
+
+- The {{cssxref("opacity")}} property is given a basic transition over `600ms` to create the fade-in/fade-out effect.
+- The {{cssxref("content-visibility")}} property (which is toggled between `hidden` and `visible` when the `` content is expanded/collapsed) is given a `600ms` transition with the {{cssxref("transition-behavior")}} value `allow-discrete` specified. This opts the browser into having a transition started on `content-visibility`, the animation behavior of which is [discrete](/en-US/docs/Web/CSS/Guides/Animations/Animatable_properties#discrete). The effect is that the content is visible for the entire duration of the transition, allowing other transitions to be seen. If this transition was not included, the content would immediately disappear when the `` content was collapsed — you wouldn't see the smooth fade-out.
+
```css
details::details-content {
opacity: 0;
@@ -95,6 +105,8 @@ details[open]::details-content {
#### Result
+To see the animation, toggle the visibility of the detail contents by clicking on the summary.
+
{{EmbedLiveSample("Transition_example", "100%", 150)}}
## Specifications
From c8dc6b8523834ea235951685dcd1a9124509b615 Mon Sep 17 00:00:00 2001
From: Estelle Weyl
Date: Mon, 8 Dec 2025 12:46:42 +0100
Subject: [PATCH 05/11] CSS property pages: animation-range-start and
animation-range-end (#42029)
* merge conflict
* revert local issue
* rewrite property pages and examples
* Add 'your browser does not support' feature to example
* Add global values to animation-range-end property
Added global values for the animation-range-end property.
* Add global values to animation-range-start
Added global values for animation-range-start property.
* review edits
* Apply suggestions from code review
Co-authored-by: Dipika Bhattacharya
---------
Co-authored-by: Dipika Bhattacharya
---
.../properties/animation-range-end/index.md | 176 ++++++++++++------
.../properties/animation-range-start/index.md | 153 +++++++++------
2 files changed, 207 insertions(+), 122 deletions(-)
diff --git a/files/en-us/web/css/reference/properties/animation-range-end/index.md b/files/en-us/web/css/reference/properties/animation-range-end/index.md
index 97a5330ce32f924..16d87df0d730cef 100644
--- a/files/en-us/web/css/reference/properties/animation-range-end/index.md
+++ b/files/en-us/web/css/reference/properties/animation-range-end/index.md
@@ -6,12 +6,7 @@ browser-compat: css.properties.animation-range-end
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 {{cssxref("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.
+The **`animation-range-end`** [CSS](/en-US/docs/Web/CSS) property sets the point on the timeline where an animation should end.
## Syntax
@@ -26,13 +21,35 @@ animation-range-end: cover;
animation-range-end: contain;
animation-range-end: cover 80%;
animation-range-end: contain 700px;
+
+/* Global values */
+animation-range-end: inherit;
+animation-range-end: initial;
+animation-range-end: revert;
+animation-range-end: revert-layer;
+animation-range-end: unset;
```
### Values
-Allowed values for `animation-range-end` are `normal`, a {{cssxref("length-percentage")}}, a ``, or a `` with a `` following it. See {{cssxref("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")}}
+ - : Specifies a length or percentage value measured from the beginning of the timeline.
+- [``](/en-US/docs/Web/CSS/Reference/Values/timeline-range-name)
+ - : Specifies a named timeline range within the overall timeline. The range starts at `0%`.
+- ``
+ - : Specifies a length or percentage value measured from the beginning of the specified named timeline range.
+
+## 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. 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.
+
+The property value can be `normal`, a ``, or a {{cssxref("timeline-range-name")}} with an optional ``. If the `` value does not include a ``, the percentage defaults to `100%`.
+
+The `animation-range-end` property 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-end` value to `normal`; the shorthand cannot be used to set a new `animation-range-end` value. 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 avoid resetting the value to `normal`.
+
+The `animation-range-end` property, along with the {{cssxref("animation-range-start")}} property, can also be set by using the {{cssxref("animation-range")}} shorthand.
## Formal definition
@@ -44,18 +61,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. This makes the animation reach its 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
Content
@@ -74,34 +86,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.
+
+```
-
+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.
-
- 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
+
+```
+
+```html hidden
+
+ 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.
+
+
+```
+
+We've also included a checkbox that will toggle the {{cssxref("animation-fill-mode")}} property, so you can see how this property affects animations with shortened timelines.
+
+```html
+
+```
+
+```html hidden
```
#### CSS
-The `subject` element and its containing `content` element are styled minimally, and the text content is given some basic font settings:
+We've defined a view progress timeline by 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 to avoid resetting the longhand property value.
+
+We've also set `animation-range-end` to make the animation end earlier than expected.
+
+```css
+.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);
+ }
+}
+```
+
+When the checkbox is checked, the `animation-fill-mode` property gets applied to the animated element:
```css
-.subject {
+:has(:checked) .animatedElement {
+ animation-fill-mode: forwards;
+}
+```
+
+The other styles applied in this example has been hidden here for 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;
@@ -121,41 +192,23 @@ p {
font-size: 1.5rem;
line-height: 1.5;
}
-```
-
-The `
` 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);
+@supports not (animation-range-end: normal) {
+ body::before {
+ content: "Your browser does not support the 'animation-range-end' property.";
+ color: black;
+ background-color: wheat;
+ display: block;
+ text-align: center;
+ padding: 1rem 0;
}
}
```
#### Result
-Scroll to see the subject element being animated.
+Scroll to see the element animate. Then toggle the checkbox at the end of the block of text and scroll again. Notice how the element finishes animating when it is 75% of the way through the viewport, and how it returns to its default state at that 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
@@ -168,9 +221,10 @@ Scroll to see the subject element being animated.
## See also
- {{cssxref("animation-timeline")}}
-- {{cssxref("animation-range")}}, {{cssxref("animation-range-start")}}
-- {{cssxref("scroll-timeline")}}, {{cssxref("scroll-timeline-axis")}}, {{cssxref("scroll-timeline-name")}}
-- {{cssxref("timeline-scope")}}
+- {{cssxref("animation-range")}}
+- {{cssxref("animation-range-start")}}
- {{cssxref("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)
+- {{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 progress timeline: Ranges and animation progress visualizer](https://scroll-driven-animations.style/tools/view-timeline/ranges/)
diff --git a/files/en-us/web/css/reference/properties/animation-range-start/index.md b/files/en-us/web/css/reference/properties/animation-range-start/index.md
index 92d8afc66fcc7f4..26e011a282172b4 100644
--- a/files/en-us/web/css/reference/properties/animation-range-start/index.md
+++ b/files/en-us/web/css/reference/properties/animation-range-start/index.md
@@ -6,12 +6,7 @@ browser-compat: css.properties.animation-range-start
sidebar: cssref
---
-The **`animation-range-start`** [CSS](/en-US/docs/Web/CSS) property is used to set the start of an animation's attachment range along its timeline, i.e., where along the timeline an animation will start.
-
-The `animation-range-start` and {{cssxref("animation-range-end")}} properties can also be set using the {{cssxref("animation-range")}} shorthand property.
-
-> [!NOTE]
-> `animation-range-start` is included in the {{cssxref("animation")}} shorthand as a reset-only value. This means that including `animation` resets a previously-declared `animation-range-start` 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-start` after declaring any `animation` shorthand for it to take effect.
+The **`animation-range-start`** [CSS](/en-US/docs/Web/CSS) property sets the point on the timeline where an animation should start.
## Syntax
@@ -26,13 +21,35 @@ animation-range-start: cover;
animation-range-start: contain;
animation-range-start: cover 20%;
animation-range-start: contain 100px;
+
+/* Global values */
+animation-range-start: inherit;
+animation-range-start: initial;
+animation-range-start: revert;
+animation-range-start: revert-layer;
+animation-range-start: unset;
```
### Values
-Allowed values for `animation-range-start` are `normal`, a {{cssxref("length-percentage")}}, a ``, or a `` with a `` following it. See {{cssxref("animation-range")}} for a detailed description of the available values.
+- `normal`
+ - : Represents the start of the timeline. This is the default value.
+- {{cssxref("length-percentage")}}
+ - : Specifies a length or percentage value measured from the beginning of the timeline.
+- [``](/en-US/docs/Web/CSS/Reference/Values/timeline-range-name)
+ - : Specifies a named timeline range within the overall timeline. The range starts at `0%`.
+- ``
+ - : Specifies a length or percentage value measured from the beginning of the specified named timeline range.
+
+## Description
+
+Allowed values for the `animation-range-start` property are `normal`, a {{cssxref("length-percentage")}}, a ``, or a `` followed by a ``. If the [``](/en-US/docs/Web/CSS/Reference/Values/timeline-range-name) value does not include a ``, 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.
+
+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`.
-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-start`, along with the {{cssxref("animation-range-end")}} property, can also be set using the {{cssxref("animation-range")}} shorthand.
## Formal definition
@@ -44,18 +61,13 @@ Also check out the [View Timeline Ranges Visualizer](https://scroll-driven-anima
## Examples
-### Creating a named view progress timeline with range start
+### Creating a scroll view progress timeline with range start
-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.
-
-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 start well before the element enters the scrollport.
#### HTML
-The HTML for the example is shown below.
-
-```html
+```html hidden
Content
@@ -74,29 +86,64 @@ 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.
+
+```
-
+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.
-
- 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
+
+```
+
+```html hidden
+
+ 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.
+
```
#### CSS
-The `subject` element and its containing `content` element are styled minimally, and the text content is given some basic font settings:
+A scroll progress timeline is defined using setting a [`scroll()`](/en-US/docs/Web/CSS/Reference/Properties/animation-timeline/scroll) function as the value of the {{cssxref("animation-timeline")}} property. This is declared **after** the {{cssxref("animation")}} shorthand to avoid resetting the longhand property value.
+
+We've also set `animation-range-start` to make the animation start earlier than expected.
```css
-.subject {
- width: 300px;
+.animatedElement {
+ background-color: deeppink;
+
+ animation: appear 1ms linear;
+
+ animation-timeline: scroll();
+ animation-range-start: -25%;
+}
+
+@keyframes appear {
+ from {
+ background-color: rebeccapurple;
+ opacity: 0;
+ transform: scaleX(0);
+ }
+
+ to {
+ background-color: darkturquoise;
+ opacity: 0.75;
+ transform: scaleX(0.75);
+ }
+}
+```
+
+Other styles applied in this example have been hidden here for brevity.
+
+```css hidden
+.animatedElement {
height: 200px;
margin: 0 auto;
background-color: deeppink;
@@ -121,39 +168,22 @@ p {
font-size: 1.5rem;
line-height: 1.5;
}
-```
-
-The `