animation-timeline
The animation-timeline property specifies the timeline that controls the progress of an animation.
Formal Syntax
<single-animation-timeline>#
JavaScript Access
// Access via element.style
element.style.animationTimeline = 'auto';
Browser Support
| Feature | Chrome | Firefox | Safari | Edge |
|---|---|---|---|---|
| animation-timeline | 115 | 110 | 26 | 115 |
| auto | 115 | — | 26 | 115 |
| none | 115 | — | 26 | 115 |
| scroll | 115 | 110 | 26 | 115 |
| view | 115 | 114 | 26 | 115 |
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
- animation
- animation-composition
- animation-delay
- animation-direction
- animation-duration
- animation-fill-mode
- animation-iteration-count
- animation-name
- animation-play-state
- animation-range
- animation-range-end
- animation-range-start
- animation-timing-function
- scroll-timeline
- scroll-timeline-axis
- scroll-timeline-name
- timeline-scope
- transition
- transition-behavior
- transition-delay
- transition-duration
- transition-property
- transition-timing-function
- view-timeline
- view-timeline-axis
- view-timeline-inset
- view-timeline-name
- view-transition-class
- view-transition-name
- view-transition-group 🧪
- animation-range-center 🚧
- animation-trigger 🚧
- timeline-trigger 🚧
- timeline-trigger-exit-range 🚧
- timeline-trigger-exit-range-end 🚧
- timeline-trigger-exit-range-start 🚧
- timeline-trigger-name 🚧
- timeline-trigger-range 🚧
- timeline-trigger-range-end 🚧
- timeline-trigger-range-start 🚧
- timeline-trigger-source 🚧