animation-range-start

The animation-range-start CSS property sets the point on the timeline where an animation should start.

Allowed values for the animation-range-start property are normal, a length-percentage, a <timeline-range-name>, or a <timeline-range-name> followed by a <length-percentage>. If the timeline-range-name value does not include a <length-percentage>, the percentage defaults to 0%.

See animation-range for a detailed description of the available values.

When specifying multiple comma-separated values, they apply to the animations in the order in which the animation-name values appear. See Setting multiple animation property values.

The animation-range-start is included in the animation shorthand as a reset-only value. This means that using the animation shorthand resets any previously declared animation-range-start value of equal or lower specificity to normal; the shorthand cannot be used to set a new animation-range-start value. When creating CSS scroll-driven animations, you should declare animation-range-start after declaring any animation shorthand to avoid resetting the value to normal.

Syntax example: animation-range-start: normal;