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.
Quick 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;
}Quick facts
Initial value
noneInherited
No
Applies to
all elements
Animation type
notAnimatable
Values
none view-timeline-name 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+