animation-range

animation-range-start

animation-range-end

Summary of characteristics of the `animation-range` property

Quick description

Specifies the start and end point of the animation, in the case of scroll-driven animation.

Status

Standard

Usable for

HTML

Percentages

See individual properties.

Initial value

See individual properties.

Inherited by default

No.

Animation type

Not animable: the animation-range property cannot be animated.

Canonical order

Per grammar: serialization in the order of syntax.

W3C Module

Scroll-driven Animations

References (W3C)

Scroll-driven Animations - Level 1

Document status: WD (Working Draft)

Syntax diagram of `animation-range`.

Syntax diagram of the
animation-range-start and animation-range-end properties
The links in the diagram provide more details about the values.

In the diagram, the bold terms are the predefined words of CSS, the other terms are described below:

length / % is a numeric value followed by one of the CSS dimension units, or a percentage calculated relative to the dimension of the scrolling frame.
name : is a user-defined identifier.
Several values can be set by separating them with commas.

Description of `animation-range-start`, `animation-range-end` and `animation-range`.

⚠

Recent feature described in the CSS module 'Scroll-driven Animations'.

The animation-range property is a shorthand property for animation-range-start and animation-range-end. These three properties come into play in the case of a scroll-driven animation. They define how much of the scrolling will be used to drive the animation.

This is what a scroll-driven animation looks like. It doesn't work on Firefox (2024):

Use the scrolling bar to scroll through the content and activate the animation.

Other properties to know.

Here are some of the properties and functions needed to implement scroll-driven animations.

Tutorial : scroll-driven animations

overflow :

Overflow management, when the content is too large for the dimensions imposed on the element. Essential with scroll or auto on the scrolling container.

animation-timeline :

Associates animation with something other than time, such as scrolling through an element.

animation-range :

Specifies the start and end point of the animation, in the case of scroll-driven animation.

scroll-timeline :

Summary property defining the parameters of an animation driven by the position of a scrollbar.

timeline-scope :

Sets the scope of a timeline for scroll-driven animation.

view-timeline :

Shorthand property defining the parameters of an animation based on the visibility of an element in the scroll window (scroll-driven animation).

view-timeline-inset :

Specifies an adjustment of the scroll box in the context of a scroll-driven animation.

scroll() :

Facilitates the implementation of scroll-driven animations.

view() :

Defines a Scroll Driver Animation.

Values for `animation-range-start` and `animation-range-end`.

In the examples below, the color of the inner block is supposed to change as you scroll. But the examples don't work with Firefox (2025).

animation-range-start: normal; animation-range-end: normal; animation-range: normal normal;

With these values, which are the initial values, scrolling is fully taken into account to drive the animation.
animation-range-start: 40%; animation-range-end: 60%; animation-range: 40% 60%;

The values should be followed by one of the CSS dimension units, or be percentages, both evaluated against the start of the race.
The portion of scrolling that is used to drive animations is defined by these two values.

If the starting value is greater than the ending value, the animation will never be triggered.
If the starting value is negative, the start of the animation is not played.
If the max value is greater than 100%, the end of the animation will never be played.

During the animation, the rectangle changes from black to gray; when the animation is pending, the rectangle is sky blue.

animation-range:40% 60%;

Nevertheless, the property animation-fill-mode influences the color of the rectangle outside the animation area:
- none: the color is determined by the property background-color.
- backwards: before the animation starts, the color is that of the beginning of the animation.
- forwards: when the animation is finished, the color is that of the end of the animation.
- both: before the start of the animation, the color is that of the beginning of the animation, and when it is finished, the color is that of the end of the animation.
animation-range:40% 60%;
animation-fill-mode:backwards;

animation-range:40% 60%;
animation-fill-mode:forwards;
animation-range-start: entry 20%; ⚠ animation-range-end: exit 80%; ⚠ animation-range: entry 20% exit 80%; ⚠

The entry and exit identifiers are both user-defined names. They identify with the values 20% and 80%. These names can then be used in syntax with animation-timeline.
animation-range-start: 20%, 25%; animation-range-end: 80%, 90%; animation-range: 20% 80%, 25% 90%;

Several values can be specified, separated by commas. This syntax is useful when multiple animations are defined on the element.
animation-range: initial; animation-range: inherit; animation-range: revert; animation-range: revertLayer; animation-range: unset;
animation-range-start: initial; (normal) animation-range-start: inherit; animation-range-start: revert; animation-range-start: revertLayer; animation-range-start: unset;
animation-range-end: initial; (normal) animation-range-end: inherit; animation-range-end: revert; animation-range-end: revertLayer; animation-range-end: unset;

See the following pages for more details: initial, inherit, revert, revert-layer, unset.

Animating these properties.

The animation-range-start and animation-range-end properties cannot be animated, as all other properties that are used to define animations. The same is of course true for the summarized animation-range property.

Manipulating the `animation-range` property programmatically.

With Javascript, change the value of `animation-range`.

In Javascript, here's how to change the value of animation-range. We see that Javascript offers a syntax with the typical CSS notation, in kebab-case (a hyphen to separate words), and another syntax with the notation in camel-case (a capital letter to separate words).


	let el = document.getElementById('id');
	el.style['animation-range'] = '20% 50%';
	// or
	let el = document.getElementById('id');
	el.style.animationRange = '20% 50%';

With Javascript, read the value of `animation-range`.

The property must have been assigned directly to the element itself through its style attribute, not through a CSS selector.


	let el = document.getElementById('id');
	let value = el.style['animation-range'];
	// or
	let el = document.getElementById('id');
	let value = el.style.animationRange;

With Javascript, read the calculated value of `animation-range`.

The computed value is that which results from the valuation of the relative units and the possible taking into account of inherited values. The computed value is always set.


	let el = document.getElementById('id');
	let value = window.getComputedStyle(el).getPropertyValue('animation-range');

With JQuery, change the value of `animation-range`.


 $('#id').css('animation-range', '20% 50%');
 // or
 $('#id').css('animationRange', '20% 50%');

With Javascript, read the value of `animation-range`.


	let value = $('#id').css('animation-range');

Other code examples.

More examples of Javascript and JQuery code are given on the Javascript and CSS page.

Test it yourself.

The buttons below apply the entered value to the animation-range property and then display either the value as applied, or the calculated value. This second option allows you to see how the value of animation-range is stored (serialized). In particular, we note that the percentages are well remembered as percentages (see the chapter on inheritance), but all other units are converted to pixels.

⚠ On Firefox the values are not stored.

Simulator.

The scroll bar rotates the square and changes its color. By adjusting the value of Animation-range-start and animation-range-end, you will be able to adjust the amount of scrolling you will take into account to rotate the square.
The animation-fill-mode property has been set to both, which maintains the extreme states of the square.

animation-range-start :

normal

animation-range-end :

normal