animation-range

The animation-range CSS shorthand property is used to set the start and end of an animation’s attachment range along its timeline, i.e., where along the timeline an animation will start and end.

The animation-range shorthand property sets the animation-range-start and animation-range-end values, defining where along the animation timeline the animation will start and end. By default, the styles defined in a keyframe animation are only applied to an element while that element is being animated. When a keyframe animation is applied to an element depends on the animation timeline of that animation. By default, animations are only applied between the timeline’s range start and range end. To apply the animation outside of this range, set the animation-fill-mode to backwards, forwards, or both. These three animation-fill-mode values apply the first keyframe styles until range start, the last keyframe styles after the animation ends, or both before and after, respectively.

Syntax example: animation-range: normal;