animation-timeline

The animation-timeline CSS property specifies the timeline used to control the progress of a CSS animation.

The default timeline for a CSS keyframe animation is the time-based DocumentTimeline. The animation-timeline property can be used to set a named or anonymous scroll progress or view progress timeline. Alternatively, it can be used to explicitly set the default time-based document timeline to control the progress of an element’s animation or to have no timeline at all, in which case the element does not animate.

The following types of timelines can be set via animation-timeline:

The animation-timeline property is included in the animation shorthand as a reset-only value. This means that including animation resets a previously-declared animation-timeline value to auto. As this component of the shorthand is reset-only, a specific value cannot be set via animation. When creating CSS scroll-driven animations, you need to declare animation-timeline after declaring any animation shorthand for it to take effect.

Syntax example: animation-timeline: none;