Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Apprendre Gestion des États d'Animation en CSS | Animations CSS Avancées
Techniques CSS Avancées

bookGestion 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 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.

index.html

index.html

index.css

index.css

copy

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.html

index.css

index.css

copy
question mark

Quel est le but de la propriété animation-fill-mode

Select the correct answer

Tout était clair ?

Comment pouvons-nous l'améliorer ?

Merci pour vos commentaires !

Section 4. Chapitre 4

Demandez à l'IA

expand

Demandez à l'IA

ChatGPT

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

bookGestion 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 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.

index.html

index.html

index.css

index.css

copy

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.html

index.css

index.css

copy
question mark

Quel est le but de la propriété animation-fill-mode

Select the correct answer

Tout était clair ?

Comment pouvons-nous l'améliorer ?

Merci pour vos commentaires !

Section 4. Chapitre 4
some-alt