animation-range-end

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

The animation-range-end property specifies the end of the animation’s attachment range. Changing the end of the attachment range can potentially shift the end of the animation, that is, the point where keyframes mapped to 100% progress land when the iteration count is 1, and can also reduce the effective duration of the animation.

The property value can be normal, a <length-percentage>, or a timeline-range-name with an optional <length-percentage>. If the <timeline-range-name> value does not include a <length-percentage>, the percentage defaults to 100%.

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.

Syntax example: animation-range-end: normal;