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.
Quick example
.sticky-nav {
animation: fade both;
animation-timeline: scroll();
/* Animation starts when the user has scrolled 100px down */
animation-range-start: 100px;
}Quick facts
Initial value
normalInherited
No
Applies to
all elements
Animation type
notAnimatable
Values
normal animation-range-start 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+