Propiedad CSS animation-direction

La propiedad CSS animation-direction define cómo debe reproducirse una animación: hacia adelante, hacia atrás o en ciclos alternos. El valor predeterminado es normal.

Esta página explica qué hace cada valor, cómo usarlo junto con el resto de las propiedades de animación y los errores comunes que suelen confundir a los desarrolladores (como por qué alternate parece no funcionar hasta que se aumenta el número de iteraciones).

Qué controla animation-direction

Cuando defines una animación con @keyframes, la regla describe un único recorrido del 0% al 100%. La propiedad animation-direction determina en qué sentido se reproduce esa línea de tiempo en cada iteración:

Hacia adelante — del 0% al 100% (el orden natural de lectura de tus keyframes).
Hacia atrás — del 100% al 0%, lo que también invierte la función de temporización (un ease-in se reproduce como ease-out).
Alternando — las iteraciones pares e impares se reproducen en direcciones opuestas, de modo que el elemento avanza y retrocede sin saltos bruscos.

Esto permite escribir un único conjunto de keyframes y obtener un efecto de "ping-pong" de ida y vuelta de forma gratuita, sin necesidad de definir manualmente el recorrido de regreso.

Cuando se especifican varios valores separados por comas para cualquier propiedad de animación, se aplican en orden a las animaciones correspondientes definidas en animation-name.

La propiedad animation-direction es una de las propiedades CSS3, y generalmente se establece junto con animation-iteration-count, animation-duration y las demás propiedades individuales, o se agrupa en la propiedad abreviada animation.

Valor inicial	normal
Se aplica a	Todos los elementos. También se aplica a los pseudoelementos ::before y ::after.
Heredada	No.
Animatable	No.
Versión	CSS3
Sintaxis DOM	object.style.animationDirection = "reverse"

Sintaxis

Sintaxis de la propiedad CSS animation-direction

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

Ejemplo de la propiedad animation-direction:

Ejemplo de la propiedad CSS animation-direction con el 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>

Pruébalo tú mismo »

Ejemplo de la propiedad animation-direction con el valor "reverse":

Ejemplo de la propiedad CSS animation-direction con el 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>

Pruébalo tú mismo »

Ejemplo de la propiedad animation-direction con el valor "alternate":

Ejemplo de la propiedad CSS animation-direction con el 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>

Pruébalo tú mismo »

Ejemplo de la propiedad animation-direction con el valor "alternate-reverse":

Ejemplo de la propiedad CSS animation-direction con el 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>

Pruébalo tú mismo »

Uso dentro de la propiedad abreviada animation

animation-direction es solo una parte de una animación. Puede establecerse de forma individual, pero lo más habitual es escribirla como parte de la propiedad abreviada animation, donde la palabra clave de dirección puede aparecer en cualquier posición entre los demás valores:

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

Las dos reglas siguientes describen exactamente la misma animación:

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

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

Errores comunes

alternate necesita más de una iteración. Con el valor predeterminado animation-iteration-count: 1, la animación se ejecuta una sola vez, por lo que el "recorrido de vuelta" nunca ocurre y alternate parece idéntico a normal. Establece el contador en 2 (o más, o infinite) para ver el efecto.
reverse no es lo mismo que alternate. reverse reproduce cada iteración de fin a inicio; alternate cambia la dirección en cada iteración. Usa reverse para ejecutar los keyframes siempre hacia atrás, y alternate para un bucle de ida y vuelta.
La función de temporización también se invierte. Cuando una iteración se reproduce hacia atrás, su función de temporización se refleja, lo que mantiene la aceleración visualmente coherente en los puntos de giro.

Valores

Valor	Descripción	Pruébalo
normal	Es el valor predeterminado; la animación se reproduce hacia adelante.	Pruébalo »
reverse	La animación se reproduce hacia atrás. Cada vez que se ejecuta la animación, se restablece al final y comienza de nuevo. La función de temporización también se invierte.	Pruébalo »
alternate	Primero la animación avanza hacia adelante y luego hacia atrás. Requiere `animation-iteration-count` ≥ 2 para ser visible.	Pruébalo »
alternate-reverse	Primero la animación avanza hacia atrás y luego hacia adelante. Requiere `animation-iteration-count` ≥ 2 para ser visible.	Pruébalo »
initial	Establece la propiedad en su valor predeterminado.
inherit	Hereda la propiedad de su elemento padre.

Práctica

¿Cuáles son los posibles valores de la propiedad CSS animation-direction?