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.
It is documented as part of the Scroll-driven Animations specification.
Syntax
/* Usage Example */
.revealing-box {
view-timeline: --reveal block;
animation-timeline: --reveal;
/* animation starts when the box enters the viewport */
}
/* Syntax */
view-timeline: view-timeline-name;
view-timeline: view-timeline-axis;
view-timeline: view-timeline-inset;
/* Global values */
view-timeline: inherit;
view-timeline: initial;
view-timeline: revert;
view-timeline: revert-layer;
view-timeline: unset;view-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