Propiedad CSS animation-direction

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

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.

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

Sintaxis

Sintaxis de la propiedad CSS animation-direction

css

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

Ejemplo de la propiedad animation-direction:

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

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

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

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

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

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

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

Valores

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

Propiedad CSS animation-direction ​

Sintaxis ​

Ejemplo de la propiedad animation-direction: ​

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

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

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

Valores ​

Práctica ​

Propiedad CSS animation-direction

Sintaxis

Ejemplo de la propiedad animation-direction:

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

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

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

Valores

Práctica