Propriedade CSS animation-direction

A propriedade CSS animation-direction define como uma animação deve ser reproduzida: para a frente, para trás ou em ciclos alternados. O valor predefinido é normal.

Quando são especificados vários valores separados por vírgula para qualquer propriedade de animação, estes são aplicados por ordem às animações correspondentes definidas em animation-name.

A propriedade animation-direction é uma das propriedades CSS3.

Valor inicial	normal
Aplica-se a	Todos os elementos. Aplica-se também aos pseudo-elementos ::before e ::after.
Herdada	Não.
Animável	Não.
Versão	CSS3
Sintaxe DOM	object.style.animationDirection = "reverse"

Sintaxe

Sintaxe da propriedade CSS animation-direction

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

Exemplo da propriedade animation-direction:

Exemplo da propriedade CSS animation-direction com o valor 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>

Experimente Você Mesmo »

Exemplo da propriedade animation-direction com o valor "reverse":

Exemplo da propriedade CSS animation-direction com o valor 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>

Experimente Você Mesmo »

Exemplo da propriedade animation-direction com o valor "alternate":

Exemplo da propriedade CSS animation-direction com o valor 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>

Experimente Você Mesmo »

Exemplo da propriedade animation-direction com o valor "alternate-reverse":

Exemplo da propriedade CSS animation-direction com o valor 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>

Experimente Você Mesmo »

Valores

Valor	Descrição	Experimente
normal	É o valor predefinido; a animação é reproduzida para a frente.	Experimente »
reverse	A animação é reproduzida para trás. Sempre que executa a animação, esta reinicia no fim e recomeça. A função de temporização também é invertida.	Experimente »
alternate	Primeiro a animação avança para a frente, depois para trás. Para ser visível, requer `animation-iteration-count` ≥ 2.	Experimente »
alternate-reverse	Primeiro a animação avança para trás, depois para a frente. Para ser visível, requer `animation-iteration-count` ≥ 2.	Experimente »
initial	Define a propriedade com o seu valor predefinido.
inherit	Herda a propriedade do seu elemento pai.

Prática

What are the possible values for the CSS Animation-direction property?