w3docs logo

Propriété CSS animation-direction

La propriété CSS animation-direction définit la façon de jouer l’animation, c’est-à-dire, si l'animation va jouer dans la direction opposée, ou sous la forme de cycles alternés. La valeur initiale est "normal". Lorsque la boucle d'animation se termine, l'animation est supprimée au début et la boucle reprend.

Valeur initiale normal
Appliquée à Tous les éléments, elle est appliquée aussi aux pseudo-éléments ::before et ::after.
Héritée Non.
Animable Non.
Version CSS3
Syntaxe DOM object.style.animationDirection = "reverse"

Syntaxe

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

Exemple

<!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>Exemple de animation-direction</h2>
    <p>Ici l'animation joue dans la direction opposée.</p>
    <div></div>
  </body>
</html>

Voici un autre exemple, quand l'animation est inversée .

Exemple

<!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>Exemple de animation-direction</h2>
    <p>Dans cet exemple, l'animation joue comme inversée.</p>
    <div></div>
  </body>
</html>

Voici un autre exemple, où l'animation est jouée sous la forme de cycles alternés.

Exemple

<!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>Exemple de animation-direction</h2>
    <p>Ici l'animation est au début jouée en avant, ensuite en arrière.</p>
    <div></div>
  </body>
</html>

Voici un autre exemple, où l'animation est alternée-inversée.

Exemple

<!DOCTYPE html>
<html>
  <head>
    <style> 
      div {
      width: 100px;
      height: 100px;
      background: #ccc;
      position: relative;
      animation: myfirst 5s 1;
      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>Exemple de animation-direction</h2>
    <p>Ici l'animation est jouée en arrière, ensuite en avant.</p>
    <div></div>
  </body>
</html>

Valeurs

Valeur Description
normal Lorsque la boucle d'animation se termine, l'animation est supprimée au début et la boucle reprend. C'est la valeur par défaut.
reverse L'animation est lue dans le sens opposé, c'est-à-dire que chaque fois que l'animation commence sa lecture à partir de son point de fin, elle parcourt tout le cycle et recommence.
alternate Au début, l'animation est jouée en avant, après en arrière.
alternate-reverse Au début, l'animation est jouée en arrière, après en avant.
initial Fait utiliser la valeur initiale.
inherit Hérite la propriété de l'élément parent.

Support de Navigateurs

chrome firefox safari opera
43.0+
4.0-42.0 -webkit- 		16.0+
5.0-15.0 -moz- 		9.0+
5.1-8.0 -webkit- 		12.0+
15.0-29.0 -webkit-

Pratiquez vos connaissances

Qu'est-ce que le 'animation-direction' en CSS et quelles sont ses valeurs possibles ?
Trouvez-vous cela utile?