Propriedade CSS animation-direction

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

Esta página aborda o que cada valor faz, como usá-lo junto com as demais propriedades de animação e as armadilhas mais comuns (como o motivo pelo qual alternate parece não funcionar até que você aumente o número de iterações).

O que animation-direction controla

Quando você define uma animação com @keyframes, a regra descreve uma única passagem de 0% a 100%. A propriedade animation-direction decide em qual direção cada iteração percorre essa linha do tempo:

Para frente — de 0% a 100% (a ordem de leitura natural dos seus keyframes).
Para trás — de 100% a 0%, o que também inverte a função de temporização (um ease-in é reproduzido como ease-out).
Alternando — iterações ímpares e pares percorrem direções opostas, fazendo o elemento se mover suavemente para fora e para trás sem saltos.

Isso é o que permite escrever um único conjunto de keyframes e obter de graça um efeito de "ping-pong" de vai e vem, sem precisar criar a viagem de retorno manualmente.

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

A propriedade animation-direction é uma das propriedades CSS3 e normalmente é definida junto com animation-iteration-count, animation-duration e as demais propriedades individuais, ou incorporada na abreviação animation.

Valor Inicial	normal
Aplica-se a	Todos os elementos. Também se aplica aos pseudo-elementos ::before e ::after.
Herdado	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 »

Usando dentro da abreviação animation

animation-direction é apenas uma parte de uma animação. Você pode defini-la individualmente, mas ela é escrita com mais frequência como parte da abreviação animation, onde a palavra-chave de direção pode aparecer em qualquer posição entre os outros valores:

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

Ambas as regras abaixo descrevem exatamente a mesma animação:

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

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

Armadilhas comuns

alternate precisa de mais de uma iteração. Com o padrão animation-iteration-count: 1, a animação é executada apenas uma vez, então a "viagem de retorno" nunca acontece e alternate parece idêntico a normal. Defina o contador como 2 (ou superior, ou infinite) para ver o efeito.
reverse não é o mesmo que alternate. reverse reproduz cada iteração do fim ao início; alternate inverte a direção a cada iteração. Use reverse para executar os keyframes permanentemente de forma invertida, e alternate para um loop de vai e vem.
A função de temporização também é invertida. Quando uma iteração é reproduzida ao contrário, sua função de temporização é espelhada, o que mantém a suavização visualmente consistente nos pontos de virada.

Valores

Valor	Descrição	Experimente
normal	É o valor padrão; a animação é reproduzida para frente.	Experimente »
reverse	A animação é reproduzida para trás. Cada vez que a animação é executada, ela é reiniciada a partir do final. A função de temporização também é invertida.	Experimente »
alternate	Primeiro a animação avança, depois recua. Requer `animation-iteration-count` ≥ 2 para ser visível.	Experimente »
alternate-reverse	Primeiro a animação recua, depois avança. Requer `animation-iteration-count` ≥ 2 para ser visível.	Experimente »
initial	Define a propriedade com seu valor padrão.
inherit	Herda a propriedade do elemento pai.

Prática

Quais são os valores possíveis para a propriedade CSS animation-direction?