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.
It is documented as part of the Scroll-driven Animations specification.
Syntax
/* Usage Example */
.image-reveal {
animation: fade both;
animation-timeline: view();
/* Animates while the element is entering the viewport */
animation-range: entry 0% entry 100%;
}
/* Syntax */
animation-range: animation-range-start;
animation-range: animation-range-end;
/* Global values */
animation-range: inherit;
animation-range: initial;
animation-range: revert;
animation-range: revert-layer;
animation-range: unset;animation-range Browser support
Limited availability
Since
2020 78% global usage
This feature is not Baseline because it does not work in some of the most widely-used browsers.
115+
115+
Your first month is free
Managed WordPress hosting for faster sites.
Learn more