animation-range-end
Defines where a scroll-driven animation should reach 100% completion. For example, you can stop the animation exactly when an element exits the top of the viewport.
Quick example
.header {
animation: shrink both;
animation-timeline: view();
/* Animation finishes when the element is 20% past its exit point */
animation-range-end: exit 20%;
}Quick facts
Initial value
normalInherited
No
Applies to
all elements
Animation type
notAnimatable
Values
normal animation-range-end 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+