view-timeline
A shorthand for defining a scroll timeline that is tied to when an element enters and leaves the visible part of the screen (the viewport). It's the core of modern 'reveal on scroll' animations.
Quick example
.revealing-box {
view-timeline: --reveal block;
animation-timeline: --reveal;
/* animation starts when the box enters the viewport */
}Quick facts
Initial value
See individual propertiesInherited
No
Applies to
all elements
Values
view-timeline-nameview-timeline-axisview-timeline-inset view-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+