Gestion des États d'Animation en CSS
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 debackwards
etforwards
. 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.
index.html
index.css
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.
index.html
index.css
Merci pour vos commentaires !
Demandez à l'IA
Demandez à l'IA
Posez n'importe quelle question ou essayez l'une des questions suggérées pour commencer notre discussion
Awesome!
Completion rate improved to 2.04
Gestion des États d'Animation en CSS
Glissez pour afficher le menu
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 debackwards
etforwards
. 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.
index.html
index.css
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.
index.html
index.css
Merci pour vos commentaires !