Une remarque ? Une suggestion ?...

Merci de participer à l'amélioration de ce site. Prenez le temps de rédiger votre remarque le plus précisément possible :

CSS - Propriété animation-fill-mode

Description de la propriété animation-fill-mode.

animation-fill-mode est une propriété CSS qui définit dans quel état se trouve l'élément animé lorsque une animation est terminée ou pas encore commencée, c'est à dire pendant le temps d'attente défini par animation-delay.

La propriété animation-direction influe ce qui est le début ou la fin de l'animation.

Pour consulter une présentation générale sur les animations, reportez-vous à la page présentation générale des animations en CSS.

Syntaxes pour animation-fill-mode.

  • animation-fill-mode: none;

    Valeur par défaut. Pendant le temps d'attente et après la fin de l'animation, les propriétés animées prennent leur valeur par défaut ou celle définie par d'autres règles CSS.

  • animation-fill-mode: forwards;

    A la fin de l'animation, les valeurs des propriétés animées sont celles de la fin de l'animation, compte-tenu de la direction définie par propriété Object).

  • animation-fill-mode: backwards;

    Pendant la durée d'attente, donc avant que l'animation ne commence, les valeurs des propriétés animées sont celles du début de l'animation, compte-tenu de la direction choisie par la propriété Object).

  • animation-fill-mode: both;

    Cette valeur cumule les effets des deux valeurs précédentes :
    Pendant le temps d'attente, les propriétés ont la valeur définie au début de l'animation, et à la fin de l'animation, les propriétés gardent la valeur obtenue à la fin de l'animation.

  • animation-fill-mode: backwards, forwards, ...;

    Plusieurs valeurs séparées par des virgules. Cette syntaxe est utile lorsque plusieurs animations ont été définies par Object. Pour une présentation générale des animation multiples, consultez la page animations multiples.

  • animation-fill-mode: inherit | initial | unset;

    Reportez-vous à la description générale de ces valeurs.

Simulateur.

Le simulateur fait évoluer la marge gauche de 25% à 75%, après un délai d'attente de deux secondes. En dehors de l'animation, cette marge est par ailleurs définie à zéro.

Direction :
animation-fill-mode :
0%
25%
75%
100%

Voir aussi...

Animation - Propriétés.

Animation - Directives.

Animation - Fonctions.

  • cubic-bezier() : Détermine une progression non linéaire pour les animations.
  • steps() : Définit une animation saccadée, pas par pas.