animation-range-start
Defines the exact point in a scroll timeline where the animation should begin (0%). This allows you to delay the start of an animation until an element is partially visible.
It is documented as part of the Scroll-driven Animations specification.
Syntax
/* Usage Example */
.sticky-nav {
animation: fade both;
animation-timeline: scroll();
/* Animation starts when the user has scrolled 100px down */
animation-range-start: 100px;
}
/* Syntax */
animation-range-start: normal;
/* Global values */
animation-range-start: inherit;
animation-range-start: initial;
animation-range-start: revert;
animation-range-start: revert-layer;
animation-range-start: unset;animation-range-start 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