Propriété CSS animation-direction

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

Lorsque plusieurs valeurs séparées par des virgules sont spécifiées pour une propriété d'animation quelconque, 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.

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

Syntaxe

Syntaxe de la propriété CSS animation-direction

css

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

html

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

Try it Yourself »

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

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

html

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

Try it Yourself »

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

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

html

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

Try it Yourself »

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

html

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

Try it Yourself »

Valeurs

Valeur	Description	Lecture
normal	C'est la valeur par défaut, l'animation se joue en avant.	Lecture »
reverse	L'animation se joue en arrière. Chaque fois que vous lancez l'animation, elle se réinitialise à la fin et recommence. La fonction de temporisation est également inversée.	Lecture »
alternate	D'abord, l'animation se déplace en avant, puis en arrière. Nécessite `animation-iteration-count` ≥ 2 pour être visible.	Lecture »
alternate-reverse	D'abord, l'animation se déplace en arrière, puis en avant. Nécessite `animation-iteration-count` ≥ 2 pour être visible.	Lecture »
initial	Définit la propriété sur sa valeur par défaut.
inherit	Hérite la propriété de son élément parent.

Propriété CSS animation-direction ​

Syntaxe ​

Exemple de la propriété animation-direction : ​

Exemple de la propriété animation-direction avec la valeur "reverse" : ​

Exemple de la propriété animation-direction avec la valeur "alternate" : ​

Exemple de la propriété animation-direction avec la valeur "alternate-reverse" : ​

Valeurs ​

Pratique ​

Propriété CSS animation-direction

Syntaxe

Exemple de la propriété animation-direction :

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

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

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

Valeurs

Pratique