view-timeline-name
Defines a name for a view-timeline, which tracks an element's visibility within its scroll container. You can then use this name in your 'animation-timeline' property to trigger animations based on the element's position as you scroll.
It is documented as part of the Scroll-driven Animations specification.
Syntax
/* Usage Example */
.photo-frame {
/* Names the timeline so we can link it to an animation */
view-timeline-name: --photo-reveal;
view-timeline-axis: block;
}
.photo-frame img{
animation-name: fade-in;
animation-timeline: --photo-reveal;
}
/* Syntax */
view-timeline-name: none;
/* Global values */
view-timeline-name: inherit;
view-timeline-name: initial;
view-timeline-name: revert;
view-timeline-name: revert-layer;
view-timeline-name: unset;view-timeline-name 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