animation-timeline
The 'brain' of modern scroll-driven animations. It links an animation to a timeline other than time—usually the scroll position of the page or the visibility of an element in the viewport.
Quick example
.progress-bar {
animation: grow linear;
/* Links the animation to the page scroll progress */
animation-timeline: scroll();
}Quick facts
Initial value
autoInherited
No
Applies to
all elements
Animation type
notAnimatable
animation-timeline Browser Support
Limited availability 80% global usage
This feature is not Baseline because it does not work in some of the most widely-used browsers.
Not ready for production without a fallback.
115+
114+
115+