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.
It is documented as part of the Scroll-driven Animations specification.
Syntax
/* Usage Example */
.header {
animation: shrink both;
animation-timeline: view();
/* Animation finishes when the element is 20% past its exit point */
animation-range-end: exit 20%;
}
/* Syntax */
animation-range-end: normal;
/* Global values */
animation-range-end: inherit;
animation-range-end: initial;
animation-range-end: revert;
animation-range-end: revert-layer;
animation-range-end: unset;animation-range-end 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