Animation-timeline - Property CSSanimation-timeline propertynone | autoautoNot animable: the animation-timeline property cannot be animated.Single: single value (no order).animation-timeline.animation-timeline property.In the diagram, the bold terms are the predefined words of CSS, the other terms are described below:
--id is an identifier predefined by scroll-timeline-name.axis is the indication of an axis: inline, block, x or y.length is a numeric value followed by one of the CSS dimension units.animation-timeline property.The property animation-timeline allows you to associate an animation with something other than time.
By default, an animation is a change in the value of a property over time, starting from the page load (time 0). With animation-timeline,
it is possible to vary the value of a property based on something other than time, most often the scrolling of an element.
For example: the opacity of the element below is linked to its scrolling.
⚠ Warning! This does not work with all browsers yet.
0, otherwise it would have been impossible for you to read the end of this text.
Here are the properties and functions needed to implement scroll-driven animations.
overflow :scroll() 
:view() :animation-timeline.The animation is synchronized with the timeline of the document.
The animation is not associated with any timeline, not even the default document one: it no longer runs.
--xxx is an identifier preceded by a double dash. It must have been defined with the property scroll-timeline-name
or the shorthand property scroll-timeline.
The scroll() function accepts two arguments: the axis to consider, and the element whose scrolling will be used to synchronize the animation.
The x parameter can take one of the following values:
blockinlinexyThe values horizontal and vertical are recognized by Firefox but are not standardized.
The s parameter can take one of the following values:
root: the document as a whole.nearest: the nearest scrollable element among its parents.self: the element itself: the one to which the animation is applied.With view(), the timeline is aligned with the visibility of an element. That element must therefore be part of the content that scrolls.
a: the axis to consider (block, inline, x, or y).
This parameter is optional: the default value is block.
b: end of the animation (the to side of the @keyframes directive). It is a percentage or length,
positive or negative. If it is a percentage, it is calculated relative to the dimension of the scrolling element, in the direction of
the scroll axis. In the case of a negative value, the animation starts while the element is not yet visible.
c: start of the animation (on the from side of the @keyframes rule).
A percentage or a length, positive or negative. These two values are calculated according to the drawing below.
auto)
animation-timeline: inherit;
animation-timeline: revert;
animation-timeline: revertLayer;
animation-timeline: unset;
See the following pages for more details: initial, inherit, revert, revert-layer, unset.
animation-timeline property.Here is a small fun application of the ability to synchronize the value of a property with scrolling. Here, it is the rotation angle of an image that is linked to the scrolling of an element. This results in a speedometer-shaped indicator.
This indicator is made up of two images: the scale, which is fixed, and the gauge needle, whose rotation angle is associated with the
scrolling of the element, in other words, with the position of the vertical scrollbar.
These two images are positioned as sticky so as not to scroll with the rest of the content.
The different elements that make up this example are identified as follows:
container: the container with scrolling.graduation: the image showing the graduation.indicator: the image depicting the needle.content: the element containing the text.Warning! This code does not work on certain browsers, such as Firefox, for example.
overflow-y:scroll;).@keyframes and the few
properties below. But the complete CSS includes many other rules to size and position the elements in this example.
#indicator {
transform-origin:5px 32px;
animation:rotation;
animation-timeline:
scroll(block nearest);
}
The example below is built with view(): it displays part of the text on an orange background. The animation runs when this part is visible.
animation-timeline property.Being a property that defines animations itself, animation-timeline cannot be animated.
animation-timeline property programmatically.Changes to the animation-timeline property take effect immediately. If the animation has not yet started, the effect of the change will
be visible the next time it starts. If the animation is already running, changing animation-timeline usually causes a jump in the
progress of animation.
animation-timeline in JavaScript.In JavaScript, here’s how to change the value of animation-timeline. We can see that JavaScript offers a syntax with the classic CSS
kebab-case notation (a dash to separate words), and another syntax with the camel-case notation (a capital letter to separate words).
let el = document.getElementById('id');
el.style['animation-timeline'] = 'scroll(block self)';
// or
let el = document.getElementById('id');
el.style.animationTimeline = 'scroll(block self)';
animation-timeline in JavaScript.The code below returns the value of animation-timeline when it has been set through the HTML style attribute.
The value set in the stylesheet via a CSS selector is not taken into account.
let el = document.getElementById('id');
let value = el.style['animation-timeline'];
// or
let el = document.getElementById('id');
let value = el.style.animationTimeline;
animation-timeline in JavaScript.The computed value is the one that results from evaluating the cascade of inheritances: it will primarily be the value possibly assigned
via the HTML style attribute, then the value assigned via a CSS selector (after resolving conflicts according to selector
priorities), a inherited value, or finally the initial value of animation-timeline.
In the case of animation-timeline, the value is returned in seconds, regardless of the unit used to set it.
If multiple animations are associated with the element, the different values of animation-timeline are returned separated by commas.
let el = document.getElementById('id');
let value = window.getComputedStyle(el).getPropertyValue('animation-timeline');
animation-timeline property with JQuery.
$('#id').css('animation-timeline', 'scroll(block self)');
// or
$('#id').css('animationTimeline', 'scroll(block self)');
animation-timeline property with JQuery.As in JavaScript, the value or values of animation-timeline are returned in seconds.
let value = $('#id').css('animation-timeline');
The two buttons below apply a value to the animation-timeline property. They then read back either the assigned value for the first button
or the computed value for the second. This second button allows you to see how the different values for the property are stored.
If your browser does not support scroll-driven animations, the calculated value will be empty.
The element below is defined as a container with scrolling. Use the scroll bar to activate the animation: background color change.
animation-timeline.On Firefox 
, the features of the animation-timeline property are disabled by default. They can be enabled by setting the
layout.css.scroll-driven-animation.enabled option to true (2024). See access flags on Firefox.
animation-timeline property. On Firefox, this feature must be enabled.view() function used with the animation-timeline property.scroll() function used with the animation-timeline property.(1) Disabled by default but can be enabled by setting the layout.css.scroll-driven-animation.enabled flag to true .
animation-timelineview()scroll()
animation-timeline property.
animation-timeline property.
All definitions regarding CSS animations are grouped in the specification CSS Animations.
The property animation-timeline, as well as the following ones, are therefore included in this specification.
@keyframes at-rule.@keyframes) to apply to the element.Scroll-driven animations are described in a separate specification module: Scroll-driven Animations.