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.
Usage example
.container {
/* Shorthand for name and axis */
scroll-timeline: --page-scroll block;
}
.progress-bar {
animation: fill-stripe linear;
animation-timeline: --page-scroll;
}Initial value
See individual properties
Inherited
No
Applies to
scrollContainers
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+