css.properties

animation-timeline

The animation-timeline property specifies the timeline that controls the progress of an animation.

Formal Syntax

<single-animation-timeline>#

See specification

JavaScript Access

// Access via element.style
element.style.animationTimeline = 'auto';

Browser Support

standard | MDN · Spec

FeatureChromeFirefoxSafariEdge
animation-timeline11511026115
auto11526115
none11526115
scroll11511026115
view11511426115

Behind a Flag

Some browsers require enabling a flag or preference:

  • animation-timeline — firefox: #layout.css.scroll-driven-animations.enabled = true (since 110)
  • animation-timeline: scroll — firefox: #layout.css.scroll-driven-animations.enabled = true (since 110) — Zero scroll range is treated as 100% but should be 0% (see bug 1780865).
  • animation-timeline: view — firefox: #layout.css.scroll-driven-animations.enabled = true (since 114)

Related Properties