La Propiedad ANIMATION-DIRECTION

La propiedad animation-direction en CSS te permite controlar la dirección en la que se reproduce una animación en cada iteración.

La propiedad animation-direction en CSS te permite controlar la dirección en la que se reproduce una animación en cada iteración. Esto te da la flexibilidad de hacer que una animación se reproduzca hacia adelante, hacia atrás o alternando entre ambas direcciones.

Sintaxis Básica

La sintaxis básica para usar la propiedad animation-direction es la siguiente:

CSS
 
selector {
  animation-direction: valor;
}

Donde selector es el elemento HTML al que quieres aplicar la animación y valor es la dirección en la que deseas que se reproduzca la animación.

Valores de la Propiedad animation-direction

La propiedad animation-direction puede tomar los siguientes valores:

1. normal

Este es el valor predeterminado. La animación se reproduce hacia adelante en cada iteración, desde el 0% (o from) hasta el 100% (o to) de los fotogramas clave definidos en la regla @keyframes.

Ejemplo:

HTML
 
<!DOCTYPE html>
<html>
<head>
<style>
  .cuadro {
    width: 100px;
    height: 100px;
    background-color: red;
    position: relative;
    animation-name: moverCuadro;
    animation-duration: 2s;
    animation-iteration-count: infinite;
    animation-direction: normal; /* Valor por defecto */
  }

  @keyframes moverCuadro {
    from { left: 0; }
    to { left: 300px; }
  }
</style>
</head>
<body>

  <div class="cuadro"></div>

</body>
</html>

En este ejemplo, el cuadrado rojo se moverá de izquierda a derecha repetidamente.

2. reverse

La animación se reproduce hacia atrás en cada iteración, desde el 100% (o to) hasta el 0% (o from) de los fotogramas clave.

Ejemplo:

HTML
 
<!DOCTYPE html>
<html>
<head>
<style>
  .cuadro {
    width: 100px;
    height: 100px;
    background-color: blue;
    position: relative;
    animation-name: moverCuadroReverse;
    animation-duration: 2s;
    animation-iteration-count: infinite;
    animation-direction: reverse; /* Se reproduce de derecha a izquierda */
  }

  @keyframes moverCuadroReverse {
    from { left: 300px; }
    to { left: 0; }
  }
</style>
</head>
<body>

  <div class="cuadro"></div>

</body>
</html>

Aquí, el cuadrado azul se moverá de derecha a izquierda repetidamente.

3. alternate

La animación se reproduce hacia adelante en la primera iteración, luego hacia atrás en la segunda, luego hacia adelante en la tercera, y así sucesivamente. Esto crea un efecto de "ida y vuelta".

Ejemplo:

HTML
 
<!DOCTYPE html>
<html>
<head>
<style>
  .cuadro {
    width: 100px;
    height: 100px;
    background-color: green;
    position: relative;
    animation-name: moverCuadroAlternate;
    animation-duration: 2s;
    animation-iteration-count: infinite;
    animation-direction: alternate; /* Se mueve de izquierda a derecha y luego de derecha a izquierda */
  }

  @keyframes moverCuadroAlternate {
    from { left: 0; }
    to { left: 300px; }
  }
</style>
</head>
<body>

  <div class="cuadro"></div>

</body>
</html>

En este caso, el cuadrado verde se moverá de izquierda a derecha, y luego, en la siguiente iteración, se moverá de derecha a izquierda, repitiéndose indefinidamente.

4. alternate-reverse

La animación se reproduce hacia atrás en la primera iteración, luego hacia adelante en la segunda, luego hacia atrás en la tercera, y así sucesivamente. Es la inversa de alternate.

Ejemplo:

HTML
 
<!DOCTYPE html>
<html>
<head>
<style>
  .cuadro {
    width: 100px;
    height: 100px;
    background-color: orange;
    position: relative;
    animation-name: moverCuadroAlternateReverse;
    animation-duration: 2s;
    animation-iteration-count: infinite;
    animation-direction: alternate-reverse; /* Se mueve de derecha a izquierda y luego de izquierda a derecha */
  }

  @keyframes moverCuadroAlternateReverse {
    from { left: 300px; }
    to { left: 0; }
  }
</style>
</head>
<body>

  <div class="cuadro"></div>

</body>
</html>

Aquí, el cuadrado naranja se moverá de derecha a izquierda en la primera iteración, y luego de izquierda a derecha en la segunda, repitiéndose de esta manera.

Ejemplos Prácticos

Ejemplo 1: Animación de Pulsación Alternada

HTML
 
<!DOCTYPE html>
<html>
<head>
<style>
  .boton {
    display: inline-block;
    padding: 15px 30px;
    background-color: #007bff;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    animation: pulsar 1s infinite alternate;
  }

  @keyframes pulsar {
    from { transform: scale(1); }
    to { transform: scale(1.1); }
  }
</style>
</head>
<body>

  <button class="boton">Pulsar</button>

</body>
</html>

Este ejemplo muestra un botón que parece "pulsar" al cambiar su escala hacia adelante y hacia atrás infinitamente.

Ejemplo 2: Animación de Desvanecimiento Alternada

HTML
 
<!DOCTYPE html>
<html>
<head>
<style>
  .mensaje {
    background-color: #f0f0f0;
    padding: 20px;
    border: 1px solid #ccc;
    opacity: 1;
    animation: desvanecer 1.5s infinite alternate;
  }

  @keyframes desvanecer {
    from { opacity: 1; }
    to { opacity: 0.4; }
  }
</style>
</head>
<body>

  <div class="mensaje">Este mensaje parpadeará.</div>

</body>
</html>

Aquí, el mensaje se desvanecerá y luego volverá a aparecer de forma continua.

Relación con animation-iteration-count

La propiedad animation-direction interactúa directamente con animation-iteration-count. Si la animación se repite un número impar de veces con alternate o alternate-reverse, la animación terminará en el mismo estado en el que comenzó la primera iteración. Si se repite un número par de veces, terminará en el estado opuesto.

Por ejemplo, si animation-iteration-count es 3 y animation-direction es alternate, la animación se reproducirá:

  1. Adelante
  2. Atrás
  3. Adelante

Si animation-iteration-count es 4 y animation-direction es alternate, se reproducirá:

  1. Adelante
  2. Atrás
  3. Adelante
  4. Atrás

Casos de Uso Comunes

  • Movimientos de ida y vuelta: Para elementos que deben moverse entre dos puntos de forma continua.
  • Efectos de "pulso" o "latido": Cambiando la escala o la opacidad de un elemento.
  • Indicadores de carga: Animaciones que sugieren un proceso en curso sin un punto final claro.
  • Animaciones sutiles: Para agregar interés visual sin ser demasiado intrusivo.

Consideraciones

  • Al usar reverse o alternate-reverse, asegúrate de que tus fotogramas clave estén definidos de manera lógica para que la animación tenga el efecto deseado al reproducirse hacia atrás.
  • Experimenta con diferentes valores de animation-direction y animation-iteration-count para lograr el efecto visual que buscas.

Conclusión

La propiedad animation-direction es una herramienta fundamental para controlar el flujo de tus animaciones CSS. Al permitirte especificar si una animación se reproduce hacia adelante, hacia atrás o alternando direcciones, abres un abanico de posibilidades para crear efectos visuales dinámicos y atractivos en tus páginas web. ¡No dudes en probar los diferentes valores y combinarlos con otras propiedades de animación para dar vida a tus diseños!