W3docs
es
Iniciar sesión

Propiedad CSS animation-delay

La propiedad CSS animation-delay especifica cuándo comenzará una animación. Ve ejemplos y pruébalos tú mismo.

La propiedad CSS animation-delay especifica cuánto tiempo esperar antes de que una animación comience a reproducirse. La animación puede iniciarse más tarde (retraso positivo), de forma inmediata (0s, el valor predeterminado) o saltar hasta un punto intermedio de la línea de tiempo (usando un retraso negativo).

Esta página cubre la sintaxis, los retrasos positivos y negativos, los milisegundos, el comportamiento de los retrasos con múltiples animaciones y las consideraciones de accesibilidad que debes tener en cuenta. La propiedad animation-delay es una de las propiedades CSS3, y generalmente se combina con animation-name y animation-duration.

Por qué usar animation-delay

Un retraso es útil cuando una animación no debe comenzar en el instante en que la página carga o cuando el elemento se añade al DOM. Casos comunes:

  • Escalonamiento — asigna a una lista de elementos retrasos crecientes (0s, 0.1s, 0.2s, …) para que se animen uno tras otro en lugar de todos a la vez.
  • Secuenciación — espera a que la animación de un elemento termine antes de que comience la de otro.
  • Pre-inicio — usa un retraso negativo para insertar un elemento en medio de una animación en bucle, de modo que no parezca que "arranca" desde el principio.

Cómo funciona el valor

El valor predeterminado es 0s. El valor puede expresarse en segundos (s) o milisegundos (ms).

  • Un valor positivo (animation-delay: 2s) espera ese tiempo y luego reproduce la animación desde su primer fotograma clave.
  • Un valor de 0s inicia la animación de forma inmediata.
  • Un valor negativo (animation-delay: -2s) inicia la animación al instante, pero renderizada como si ya hubiera estado reproduciéndose durante ese tiempo. La primera parte de la animación se omite — nunca se muestra.

Cuando se especifican varios valores separados por comas, estos se aplican en ciclo para coincidir con el número de animaciones indicadas en animation-name. Por ejemplo, animation-delay: 0s, 1s aplica 0s a la primera animación y 1s a la segunda.

Si los keyframes de una animación omiten el valor inicial, el navegador usa los estilos calculados del elemento en el momento en que la animación comienza.

Nota: animation-delay solo afecta a la primera iteración. No añade una pausa entre iteraciones de una animación repetida — para eso, incorpora la pausa en los propios keyframes.

PropiedadValor
Valor inicial0s
Se aplica aTodos los elementos, pseudoelementos ::before y ::after.
HeredadoNo.
AnimableNo.
VersiónCSS3
Sintaxis DOMobject.style.animationDelay = "1s";

Sintaxis

Sintaxis de la propiedad CSS animation-delay

animation-delay: time | initial | inherit;

Ejemplo de la propiedad animation-delay:

Ejemplo de la propiedad CSS animation-delay

<!DOCTYPE html>
<html>
  <head>
    <style>
      div {
        width: 120px;
        height: 120px;
        background: #1c87c9;
        position: relative;
        animation: delay 5s infinite;
        animation-delay: 3s;
      }
      @keyframes delay {
        from {
          left: 0px;
        }
        to {
          left: 300px;
        }
      }
    </style>
  </head>
  <body>
    <h2>Animation-delay example</h2>
    <p>Here the animation starts after 3 seconds.</p>
    <div></div>
  </body>
</html>
Pruébalo tú mismo »

Ejemplo de la propiedad animation-delay con un valor negativo:

Ejemplo de la propiedad CSS animation-delay con valor negativo

<!DOCTYPE html>
<html>
  <head>
    <style>
      div {
        width: 100px;
        height: 100px;
        background: #ccc;
        position: relative;
        animation: delay 5s infinite;
        animation-delay: -2s;
      }
      @keyframes delay {
        from {
          left: 0px;
        }
        to {
          left: 300px;
        }
      }
    </style>
  </head>
  <body>
    <h2>Animation-delay example with negative value.</h2>
    <p>Here, the animation will start as if it had already been playing for 2 seconds.</p>
    <div></div>
  </body>
</html>
Pruébalo tú mismo »

Ejemplo de la propiedad animation-delay especificada en milisegundos:

Ejemplo de la propiedad CSS animation-delay con milisegundos

<!DOCTYPE html>
<html>
  <head>
    <style>
      div {
        width: 120px;
        height: 120px;
        background: #8ebf42;
        position: relative;
        animation: delay 5s infinite;
        animation-delay: 200ms;
      }
      @keyframes delay {
        from {
          left: 0px;
        }
        to {
          left: 300px;
        }
      }
    </style>
  </head>
  <body>
    <h2>Animation-delay example in milliseconds.</h2>
    <p>Here, the animation will start after 200ms.</p>
    <div></div>
  </body>
</html>
Pruébalo tú mismo »

Valores

ValorDescripciónPruébalo
timeDefine el número de segundos (s) o milisegundos (ms) que se esperará antes de que comience la animación. Es opcional.Pruébalo »
initialEstablece la propiedad en su valor predeterminado.
inheritHereda la propiedad de su elemento padre.

Accesibilidad

Las animaciones con retraso y en bucle pueden distraer y provocar malestar en usuarios con trastornos vestibulares. Respeta la preferencia del sistema del usuario con la media query prefers-reduced-motion y desactiva (o reduce) el movimiento cuando se solicite:

@media (prefers-reduced-motion: reduce) {
  div {
    animation: none;
  }
}

Abreviatura

Rara vez se establece animation-delay de forma independiente — habitualmente es el cuarto valor en la abreviatura animation, que combina todas las subpropiedades de animación:

/* name | duration | timing-function | delay */
div {
  animation: delay 5s ease 3s infinite;
}

Propiedades relacionadas

Práctica

Práctica
¿Cuál es la definición correcta de la propiedad CSS animation-delay?
¿Cuál es la definición correcta de la propiedad CSS animation-delay?
Was this page helpful?