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-direction

animation-direction est une propriété ajustant un des paramètres d'une animation réalisée en CSS. Elle intervient sur le sens de l'animation : est-elle jouée à l'endroit, à l'envers ou de façon alternée.

Description de la propriété animation-direction.

animation-direction définit si l'animation est jouée dans le sens défini par la directive @keyframes ou dans le sens inverse. Si l'animation est répétée plusieurs fois, animation-direction peut également déterminer si l'animation doit faire des 'aller-retours' ou pas.

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

Syntaxes pour animation-direction.

  • animation-direction: normal;

    Valeur par défaut. L'animation est jouée dans le sens défini par Object.

  • animation-direction: reverse;

    L'animation est jouée dans le sens inverse de celui défini par Object (en commençant par la fin).

  • animation-direction: alternate;

    L'animation est jouée d'abord à l'endroit, puis à l'envers.

  • animation-direction: alternate-reverse;

    L'animation est jouée d'abord à l'envers, puis à l'endroit.

  • animation-direction: alternate, normal, ...;

    Une série de valeurs séparées par des virgules. Cette syntaxe est utilisable lorsque plusieurs animations ont été définies par la propriété Object. Pour davantage de détails sur les animations multiples, reportez-vous à la page animations multiples.

  • animation-direction: inherit | initial | unset;

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

Simulateur.

Le simulateur ci-dessous utilise une animation nommée demo1 qui déplace un élément horizontalement sur une grande partie de la ligne. Cela se fait en modifiant la marge gauche de l'élément.

Remarque : la différence entre alternate et reverse-alternate n'est pas visible car cela supposerait de recharger la page, ce qui remet la propriété à la valeur normal.

animation-direction :

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.