#animation-fill-mode

Defines what happens before an animation starts and after it ends. The fill mode allows to tell the browser if the animation’s styles should also be applied outside of the animation.

默认属性 animation-fill-mode: none;

The animation styles do not affect the default style: the element is set to its default state before the animation starts, and returns to that default state after the animation ends.

animation-fill-mode: forwards;

The last styles applied at the end of the animation are retained afterwards.

animation-fill-mode: backwards;

The animation's styles will already be applied before the animation actually starts.

animation-fill-mode: both;

The styles are applied before and after the animation plays.