Propriété CSS animation-direction

La propriété CSS animation-direction définit le sens dans lequel une animation doit être jouée : vers l'avant, vers l'arrière ou en cycles alternés. La valeur par défaut est normal.

Cette page explique ce que fait chaque valeur, comment l'utiliser avec les autres propriétés d'animation, et les pièges courants (par exemple, pourquoi alternate semble ne pas fonctionner tant que le nombre d'itérations n'est pas augmenté).

Ce que contrôle animation-direction

Lorsque vous définissez une animation avec @keyframes, la règle décrit un seul passage de 0% à 100%. La propriété animation-direction détermine dans quel sens chaque itération parcourt cette timeline :

Vers l'avant — de 0% à 100% (l'ordre de lecture naturel de vos keyframes).
Vers l'arrière — de 100% à 0%, ce qui inverse également la fonction de timing (un ease-in se joue comme un ease-out).
En alternance — les itérations paires et impaires s'exécutent dans des sens opposés, de sorte que l'élément se déplace doucement dans un sens puis dans l'autre sans saut.

C'est ce qui vous permet d'écrire un seul ensemble de keyframes et d'obtenir gratuitement un effet de va-et-vient (« ping-pong »), sans avoir à définir manuellement le trajet retour.

Lorsque plusieurs valeurs séparées par des virgules sont spécifiées pour une propriété d'animation, elles sont appliquées dans l'ordre aux animations correspondantes définies dans animation-name.

La propriété animation-direction fait partie des propriétés CSS3 ; elle est généralement utilisée conjointement avec animation-iteration-count, animation-duration et les autres propriétés individuelles, ou regroupée dans la propriété raccourcie animation.

Valeur initiale	normal
S'applique à	Tous les éléments, y compris les pseudo-éléments ::before et ::after.
Hérité	Non.
Animatable	Non.
Version	CSS3
Syntaxe DOM	object.style.animationDirection = "reverse"

Syntaxe

Syntaxe de la propriété CSS animation-direction

animation-direction: normal | reverse | alternate | alternate-reverse | initial | inherit;

Exemple de la propriété animation-direction :

Exemple de la propriété CSS animation-direction avec la valeur normal

<!DOCTYPE html>
<html>
  <head>
    <style>
      div {
        width: 120px;
        height: 120px;
        background: #ccc;
        position: relative;
        animation: myfirst 5s 1;
        animation-direction: normal;
      }
      @keyframes myfirst {
        0% {
          background: #8DC3CF;
          left: 0px;
          top: 0px;
        }
        25% {
          background: #1c87c9;
          left: 200px;
          top: 0px;
        }
        50% {
          background: #030E10;
          left: 200px;
          top: 200px;
        }
        75% {
          background: #666;
          left: 0px;
          top: 200px;
        }
        100% {
          background: #8ebf42;
          left: 0px;
          top: 0px;
        }
      }
    </style>
  </head>
  <body>
    <h2>Animation-direction example</h2>
    <p>Here the animation plays forwards.</p>
    <div></div>
  </body>
</html>

Essayez vous-même »

Exemple de la propriété animation-direction avec la valeur « reverse » :

Exemple de la propriété CSS animation-direction avec la valeur reverse

<!DOCTYPE html>
<html>
  <head>
    <style>
      div {
        width: 100px;
        height: 100px;
        background: #ccc;
        position: relative;
        animation: myfirst 5s 1;
        animation-direction: reverse;
      }
      @keyframes myfirst {
        0% {
          background: #8DC3CF;
          left: 0px;
          top: 0px;
        }
        25% {
          background: #1c87c9;
          left: 200px;
          top: 0px;
        }
        50% {
          background: #030E10;
          left: 200px;
          top: 200px;
        }
        75% {
          background: #666;
          left: 0px;
          top: 200px;
        }
        100% {
          background: #8ebf42;
          left: 0px;
          top: 0px;
        }
      }
    </style>
  </head>
  <body>
    <h2>Animation-direction example</h2>
    <p>In this example the animation plays as reverse.</p>
    <div></div>
  </body>
</html>

Essayez vous-même »

Exemple de la propriété animation-direction avec la valeur « alternate » :

Exemple de la propriété CSS animation-direction avec la valeur alternate

<!DOCTYPE html>
<html>
  <head>
    <style>
      div {
        width: 100px;
        height: 100px;
        background: #ccc;
        position: relative;
        animation: myfirst 5s 2;
        animation-direction: alternate;
      }
      @keyframes myfirst {
        0% {
          background: #8DC3CF;
          left: 0px;
          top: 0px;
        }
        25% {
          background: #1c87c9;
          left: 200px;
          top: 0px;
        }
        50% {
          background: #030E10;
          left: 200px;
          top: 200px;
        }
        75% {
          background: #666;
          left: 0px;
          top: 200px;
        }
        100% {
          background: #8ebf42;
          left: 0px;
          top: 0px;
        }
      }
    </style>
  </head>
  <body>
    <h2>Animation-direction example</h2>
    <p>Here the animation plays first forwards, then backwards.</p>
    <div></div>
  </body>
</html>

Essayez vous-même »

Exemple de la propriété animation-direction avec la valeur « alternate-reverse » :

Exemple de la propriété CSS animation-direction avec la valeur alternate-reverse

<!DOCTYPE html>
<html>
  <head>
    <style>
      div {
        width: 100px;
        height: 100px;
        background: #ccc;
        position: relative;
        animation: myfirst 5s 2;
        animation-direction: alternate-reverse;
      }
      @keyframes myfirst {
        0% {
          background: #8DC3CF;
          left: 0px;
          top: 0px;
        }
        25% {
          background: #1c87c9;
          left: 200px;
          top: 0px;
        }
        50% {
          background: #030E10;
          left: 200px;
          top: 200px;
        }
        75% {
          background: #666;
          left: 0px;
          top: 200px;
        }
        100% {
          background: #8ebf42;
          left: 0px;
          top: 0px;
        }
      }
    </style>
  </head>
  <body>
    <h2>Animation-direction example</h2>
    <p>Here the animation plays backwards, then forwards.</p>
    <div></div>
  </body>
</html>

Essayez vous-même »

Utilisation dans la propriété raccourcie animation

animation-direction n'est qu'une partie d'une animation. Vous pouvez la définir séparément, mais elle est le plus souvent écrite dans la propriété raccourcie animation, où le mot-clé de direction peut apparaître n'importe où parmi les autres valeurs :

/* name | duration | timing-function | iteration-count | direction */
animation: myfirst 5s ease-in-out 2 alternate;

Les deux règles ci-dessous décrivent exactement la même animation :

/* Longhand */
.box {
  animation-name: myfirst;
  animation-duration: 5s;
  animation-iteration-count: 2;
  animation-direction: alternate;
}

/* Shorthand — equivalent */
.box {
  animation: myfirst 5s 2 alternate;
}

Pièges courants

alternate nécessite plus d'une itération. Avec la valeur par défaut animation-iteration-count: 1, l'animation ne s'exécute qu'une seule fois, donc le « trajet retour » n'a jamais lieu et alternate semble identique à normal. Définissez le nombre à 2 (ou plus, ou infinite) pour voir l'effet.
reverse n'est pas la même chose qu'alternate. reverse joue chaque itération de la fin vers le début ; alternate inverse la direction à chaque itération. Utilisez reverse pour exécuter définitivement les keyframes à l'envers, et alternate pour une boucle de va-et-vient.
La fonction de timing s'inverse aussi. Lorsqu'une itération se joue à l'envers, sa fonction de timing est mise en miroir, ce qui maintient un rendu visuel cohérent de l'accélération aux points de retournement.

Valeurs

Valeur	Description	Essayer
normal	C'est la valeur par défaut ; l'animation se joue vers l'avant.	Essayer »
reverse	L'animation se joue à l'envers. À chaque exécution, elle repart depuis la fin. La fonction de timing est également inversée.	Essayer »
alternate	L'animation se déplace d'abord vers l'avant, puis vers l'arrière. Nécessite `animation-iteration-count` ≥ 2 pour être visible.	Essayer »
alternate-reverse	L'animation se déplace d'abord vers l'arrière, puis vers l'avant. Nécessite `animation-iteration-count` ≥ 2 pour être visible.	Essayer »
initial	Définit la propriété à sa valeur par défaut.
inherit	Hérite la propriété de son élément parent.

Exercice pratique

Pratique

Quelles sont les valeurs possibles pour la propriété CSS animation-direction ?