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.
It is documented as part of the CSS Animations specification.
Syntax
/* Usage Example */
.progress-bar {
animation: grow linear;
/* Links the animation to the page scroll progress */
animation-timeline: scroll();
}
/* Global values */
animation-timeline: inherit;
animation-timeline: initial;
animation-timeline: revert;
animation-timeline: revert-layer;
animation-timeline: unset;animation-timeline Browser support
Limited availability
Since
2020 80% global usage
This feature is not Baseline because it does not work in some of the most widely-used browsers.
115+
114+
115+
Your first month is free
Managed WordPress hosting for faster sites.
Learn more