Propriété animation-fill-mode

Il est possible de contrôler les styles d’un élément avant et après l’exécution de l’animation. animation-fill-mode spécifie si un élément doit conserver son état final issu de l’animation ou revenir à son état initial.

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

• none : Valeur par défaut. L’animation n’affecte pas l’apparence de l’élément avant ou après son exécution. L’élément conserve son apparence initiale ;
• forwards : Les styles à la fin de l’animation persistent sur l’élément, qui ne revient pas à son état initial ;
• backwards : L’élément adopte les styles définis au début de l’animation, même si celle-ci est déclenchée au survol ou comporte un délai ;
• both : Combine les effets de backwards et forwards. Avant l’animation, l’élément prend les styles du début de l’animation. Après l’animation, il conserve les styles de la fin de l’animation.

Considérons l’exemple suivant pour observer la différence entre les valeurs. Il illustre que l’état de l’élément ne changera jamais si la propriété animation-fill-mode est correctement appliquée. Après l’exécution du code, l’état final des éléments restera inchangé. Pour revoir l’animation, veuillez recharger la page.

Propriété animation-play-state

Nous pouvons contrôler l'état de lecture de l'animation. Elle peut être en pause ou en cours d'exécution.

animation-play-state: running | paused

• running - Valeur par défaut. Démarre ou reprend l'animation ;
• paused - Arrête l'animation à l'état actuel.

Considérons l'exemple suivant, où nous allons arrêter l'animation infinie lors du survol du curseur.