animation-range
A shorthand property for setting both the start and end points of a scroll-driven animation. It's the most concise way to define the 'active window' for a scroll effect.
Quick example
.image-reveal {
animation: fade both;
animation-timeline: view();
/* Animates while the element is entering the viewport */
animation-range: entry 0% entry 100%;
}Quick facts
Initial value
See individual propertiesInherited
No
Applies to
all elements
Values
animation-range-startanimation-range-end animation-range Browser Support
Limited availability 78% 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+
115+