Managing Animation State

animation-fill-mode property

We can control the element styles before and after the animation run. animation-fill-mode specifies whether an element should retain its final state from the animation or revert to its original state.

• none - This is the default value. The animation won't affect the element view before or after the animation. The element will look the same as initially;
• forwards - It means that the styles at the end of the animation will remain for the element, and it won't return to its initial view;
• backwards - It means that the element will have the styles specified at the beginning of the animation. Even if the animation is triggered on hover or it has some delay;
• both - It combines backwards and forwards. It means that before the animation run, the element will have the styles specified at the animation start. After the animation run, the element will have the styles set at the animation end.

Let's consider the following example to check the difference between the values. It was made to show that the element state will never change if we have applied the animation-fill-mode with the correct value. After running the code, the final state of the elements will be unchangeable. If we need to see the animation again, please reload the page.

animation-play-state property

We can control the animation play state. It can be paused or running.

• running - This is the default value. It starts or resumes the animation;
• paused - It stops the animation at the current state.

Let's consider the following example, where we will stop the infinite animation on the cursor hover.