La Propiedad ANIMATION-DELAY

Permite especificar la cantidad de tiempo que debe transcurrir antes de que una animación CSS comience a ejecutarse.

La propiedad animation-delay en CSS te permite especificar la cantidad de tiempo que debe transcurrir antes de que una animación CSS comience a ejecutarse. Es útil para crear efectos de entrada escalonados, coordinar animaciones o simplemente añadir una pausa antes de que una animación se inicie.

Sintaxis Básica

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

CSS
 
selector {
  animation-delay: tiempo;
}

Donde selector es el elemento HTML al que quieres aplicar la animación y tiempo es la duración del retraso.

Valores de la Propiedad animation-delay

La propiedad animation-delay acepta un valor de tiempo, que puede ser especificado en segundos (s) o milisegundos (ms).

1. Valores Positivos

Un valor positivo para animation-delay indica la cantidad de tiempo que el navegador debe esperar antes de iniciar la animación.

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: alternate;
    animation-delay: 1s; /* La animación comenzará después de 1 segundo */
  }

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

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

</body>
</html>

En este ejemplo, el cuadrado rojo esperará 1 segundo antes de comenzar a moverse de izquierda a derecha y viceversa.

2. Valor Cero

Si el valor de animation-delay es 0s (o simplemente 0), la animación comenzará inmediatamente cuando el elemento se cargue o cuando se apliquen los estilos de animación. Este es el valor por defecto.

Ejemplo:

HTML
 
<!DOCTYPE html>
<html>
<head>
<style>
  .circulo {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-color: blue;
    animation-name: cambiarOpacidad;
    animation-duration: 1.5s;
    animation-iteration-count: infinite;
    animation-delay: 0s; /* La animación comenzará inmediatamente */
  }

  @keyframes cambiarOpacidad {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.3; }
  }
</style>
</head>
<body>

  <div class="circulo"></div>

</body>
</html>

Aquí, el círculo comenzará a parpadear (cambiando su opacidad) tan pronto como la página se cargue.

3. Valores Negativos

Un valor negativo para animation-delay hará que la animación comience como si ya hubiera estado en ejecución durante esa cantidad de tiempo. Por ejemplo, si animation-delay es -1s y la animation-duration es 3s, la animación comenzará en el punto donde estaría después de 1 segundo de ejecución.

Ejemplo:

HTML
 
<!DOCTYPE html>
<html>
<head>
<style>
  .estrella {
    width: 60px;
    height: 60px;
    background-color: gold;
    clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
    position: relative;
    animation-name: rotar;
    animation-duration: 4s;
    animation-iteration-count: infinite;
    animation-delay: -2s; /* La animación comenzará como si ya hubiera rotado durante 2 segundos */
  }

  @keyframes rotar {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
  }
</style>
</head>
<body>

  <div class="estrella"></div>

</body>
</html>

En este ejemplo, la estrella comenzará su rotación como si ya hubiera estado girando durante 2 segundos de su ciclo de 4 segundos.

Ejemplos Prácticos

Ejemplo 1: Animaciones de Entrada Escalonadas

Puedes usar animation-delay para crear un efecto donde varios elementos aparecen o se animan en secuencia.

HTML
 
<!DOCTYPE html>
<html>
<head>
<style>
  .contenedor {
    display: flex;
    gap: 10px;
  }

  .barra {
    width: 30px;
    height: 100px;
    background-color: #4CAF50;
    animation-name: crecer;
    animation-duration: 0.5s;
    animation-fill-mode: backwards; /* Mantiene el estado inicial antes de la animación */
  }

  .barra:nth-child(1) { animation-delay: 0s; }
  .barra:nth-child(2) { animation-delay: 0.2s; }
  .barra:nth-child(3) { animation-delay: 0.4s; }
  .barra:nth-child(4) { animation-delay: 0.6s; }
  .barra:nth-child(5) { animation-delay: 0.8s; }

  @keyframes crecer {
    from { height: 0; }
    to { height: 100px; }
  }
</style>
</head>
<body>

  <div class="contenedor">
    <div class="barra"></div>
    <div class="barra"></div>
    <div class="barra"></div>
    <div class="barra"></div>
    <div class="barra"></div>
  </div>

</body>
</html>

Aquí, cada barra crecerá desde una altura de 0px hasta 100px, pero con un pequeño retraso entre cada una, creando un efecto escalonado.

Ejemplo 2: Coordinación de Animaciones

Puedes usar animation-delay para sincronizar diferentes animaciones en la misma página.

HTML
 
<!DOCTYPE html>
<html>
<head>
<style>
  .elemento {
    width: 80px;
    height: 80px;
    background-color: purple;
    position: absolute;
    animation-duration: 3s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
  }

  .elemento-uno {
    animation-name: moverHorizontal;
  }

  .elemento-dos {
    animation-name: moverVertical;
    animation-delay: 1.5s; /* Comienza cuando el primer elemento está en el medio de su movimiento */
  }

  @keyframes moverHorizontal {
    0% { left: 50px; }
    100% { left: 300px; }
  }

  @keyframes moverVertical {
    0% { top: 150px; }
    100% { top: 250px; }
  }
</style>
</head>
<body>

  <div class="elemento elemento-uno"></div>
  <div class="elemento elemento-dos"></div>

</body>
</html>

En este ejemplo, el segundo elemento comenzará su movimiento vertical cuando el primer elemento esté a mitad de su movimiento horizontal.

Relación con Otras Propiedades de Animación

  • animation-duration: El retraso ocurre antes de que la duración de la animación comience a contar.
  • animation-iteration-count: El retraso se aplica solo antes de la primera iteración de la animación. Si la animación se repite varias veces, no habrá retraso entre las iteraciones.

Casos de Uso Comunes

  • Efectos de carga: Mostrar un indicador de carga con un retraso antes de que comience la animación principal.
  • Animaciones de entrada: Hacer que los elementos aparezcan en la pantalla con un ligero retraso para crear una sensación de orden o flujo.
  • Tutoriales o presentaciones: Resaltar elementos en secuencia con retrasos para guiar al usuario.
  • Diseños de interfaz de usuario: Crear animaciones sutiles que no sean intrusivas al comenzar inmediatamente.

Consideraciones

  • Un retraso excesivo puede hacer que los usuarios piensen que la página o la animación no están funcionando. Utiliza retrasos con moderación.
  • Asegúrate de que el retraso tenga sentido en el contexto de la experiencia del usuario.

Conclusión

La propiedad animation-delay es una herramienta valiosa para controlar el tiempo de inicio de tus animaciones CSS. Ya sea que necesites crear efectos escalonados, coordinar múltiples animaciones o simplemente añadir una pausa inicial, animation-delay te ofrece la flexibilidad para ajustar el ritmo y la presentación de tus animaciones. ¡Experimenta con diferentes valores y descubre cómo puedes mejorar la experiencia visual de tu sitio web!