Gestion de l'État de l'Animation

Propriété animation-fill-mode

Nous pouvons contrôler les styles des éléments avant et après l'exécution de l'animation. animation-fill-mode spécifie si un élément doit conserver son état final de l'animation ou revenir à son état d'origine.

css
Copier le code
animation-fill-mode: none | forwards | backwards | both

• none - C'est la valeur par défaut. L'animation n'affectera pas l'apparence de l'élément avant ou après l'animation. L'élément aura le même aspect qu'initialement ;
• forwards - Cela signifie que les styles à la fin de l'animation resteront pour l'élément, et il ne reviendra pas à son apparence initiale ;
• backwards - Cela signifie que l'élément aura les styles spécifiés au début de l'animation. Même si l'animation est déclenchée au survol ou qu'elle a un certain délai ;
• both - Il combine backwards et forwards. Cela signifie qu'avant l'exécution de l'animation, l'élément aura les styles spécifiés au début de l'animation. Après l'exécution de l'animation, l'élément aura les styles définis à la fin de l'animation.

Considérons l'exemple suivant pour vérifier la différence entre les valeurs. Il a été conçu pour montrer que l'état de l'élément ne changera jamais si nous avons appliqué le animation-fill-mode avec la valeur correcte. Après l'exécution du code, l'état final des éléments sera inchangé. Si nous devons 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.

css
Copier le code
animation-play-state: running | paused

• running - C'est la valeur par défaut. Elle démarre ou reprend l'animation;
• paused - Elle arrête l'animation à l'état actuel.

Considérons l'exemple suivant, où nous arrêterons l'animation infinie au survol du curseur.