animation-fill-mode

The animation-fill-mode property defines what happens before the animation begins and after the animation concludes. By default, an animation won’t affect property values outside of its runs, but we can override this default behavior with animation-fill-mode . We can say the animation to "sit and wait" on the first keyframe until the animation starts, or stop on the last keyframe without reverting to the original values at the conclusion of the animation, or both.

The available values are none, forwards, backwards, or both. The default is none, in which case the animation proceeds and ends as expected, reverting to the initial keyframes when the animation completes its final iteration. When set to forwards, the animation continues to apply the values of the last keyframes after the animation ends. When set to backwards, the animation’s initial keyframes are applied as soon as the animation style is applied to an element. Both applies both the backwards and forwards effects.