Propiedad animation-fill-mode

Podemos controlar los estilos de un elemento antes y después de que se ejecute la animación. animation-fill-mode especifica si un elemento debe mantener su estado final de la animación o volver a su estado original.

animation-fill-mode: none | forwards | backwards | both

• none - Este es el valor predeterminado. La animación no afectará la visualización del elemento antes ni después de la animación. El elemento se verá igual que al inicio;
• forwards - Significa que los estilos al final de la animación permanecerán en el elemento y no volverá a su vista inicial;
• backwards - Significa que el elemento tendrá los estilos especificados al inicio de la animación. Incluso si la animación se activa al pasar el cursor o tiene algún retraso;
• both - Combina backwards y forwards. Significa que antes de que se ejecute la animación, el elemento tendrá los estilos especificados al inicio de la animación. Después de que se ejecute la animación, el elemento tendrá los estilos establecidos al final de la animación.

Consideremos el siguiente ejemplo para comprobar la diferencia entre los valores. Se realizó para mostrar que el estado del elemento nunca cambiará si hemos aplicado animation-fill-mode con el valor correcto. Después de ejecutar el código, el estado final de los elementos será inalterable. Si necesitamos ver la animación nuevamente, por favor recargue la página.

Propiedad animation-play-state

Podemos controlar el estado de reproducción de la animación. Puede estar en pausa o en ejecución.

animation-play-state: running | paused

• running - Este es el valor predeterminado. Inicia o reanuda la animación;
• paused - Detiene la animación en el estado actual.

Considerar el siguiente ejemplo, donde se detiene la animación infinita al pasar el cursor.