scroll-timeline
Links an animation's progress directly to the scroll position of a scroll container. This replaces time-based durations with scroll-based progress.
Quick example
.container {
/* Shorthand for name and axis */
scroll-timeline: --page-scroll block;
}
.progress-bar {
animation: fill-stripe linear;
animation-timeline: --page-scroll;
}Quick facts
Initial value
See individual propertiesInherited
No
Applies to
scroll containers
Values
scroll-timeline-namescroll-timeline-axis scroll-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+
111+
115+