Propiedad CSS transition-delay - Uso, Sintaxis y Ejemplos

La propiedad CSS transition-delay define cuánto tiempo esperar antes de que comience un efecto de transición una vez que ocurre el cambio que lo desencadena. Es una de las cuatro propiedades individuales que conforman la abreviación transition, junto con transition-property, transition-duration y transition-timing-function.

Esta página cubre los valores de la propiedad, el comportamiento de los retrasos positivos y negativos, cómo establecer un retraso independiente para cada propiedad animada y los usos más comunes en interfaces reales. Es una de las propiedades de CSS3.

Cómo funciona el retraso

El valor predeterminado es 0s, lo que significa que el efecto de transición comienza de inmediato cuando cambia el valor de la propiedad (por ejemplo, al usar :hover).

Un retraso positivo pospone el inicio. Con transition-delay: 2s, nada visible ocurre durante dos segundos; solo entonces la propiedad comienza a animarse desde su valor anterior al nuevo durante la transition-duration.

Un retraso negativo está permitido y se comporta de manera diferente: la transición comienza de inmediato, pero lo hace a mitad de camino en su línea de tiempo, como si ya llevara ese tiempo ejecutándose. Así, transition-duration: 4s con transition-delay: -2s salta directamente al punto intermedio y termina en los dos segundos restantes.

El retraso no se repite: a diferencia de una iteración de animación, una transición se ejecuta una sola vez por cambio, por lo que el retraso se aplica únicamente a esa única ejecución que desencadena el cambio.

Información

Los navegadores modernos admiten esta propiedad de forma nativa sin prefijos de proveedor.

Valor inicial	0s
Se aplica a	Todos los elementos, pseudoelementos ::before y ::after.
Heredable	No.
Animatable	No.
Versión	CSS3
Sintaxis DOM	object.style.transitionDelay = "3s";

Sintaxis

transition-delay: time | initial | inherit;

Ejemplo básico

Este cuadro crece cuando pasas el cursor sobre él. El retraso es 0s, por lo que el crecimiento comienza de inmediato. Cámbialo a 1s en el editor para notar la diferencia.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        width: 150px;
        height: 150px;
        background: #8ebf42;
        transition-property: width;
        transition-duration: 1s;
        transition-delay: 0s;
      }
      div:hover {
        width: 300px;
      }
    </style>
  </head>
  <body>
    <h2>Transition-delay property example</h2>
    <p>Hover over the element to see the effect.</p>
    <div></div>
  </body>
</html>

Pruébalo tú mismo »

Ejemplo con 2 segundos de retraso

Aquí el cuadro espera dos segundos completos después de que pasas el cursor antes de comenzar a crecer. Observa que transition-property lista varias propiedades como una lista separada por comas (width, height).

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        width: 150px;
        height: 150px;
        background: #8ebf42;
        transition-property: width, height;
        transition-duration: 3s;
        transition-delay: 2s;
      }
      div:hover {
        width: 300px;
        height: 300px;
      }
    </style>
  </head>
  <body>
    <h2>Transition-delay property example</h2>
    <p>Hover over the element and wait 2 seconds to see the effect.</p>
    <div></div>
  </body>
</html>

Pruébalo tú mismo »

Un retraso diferente para cada propiedad

Cuando animas varias propiedades, puedes asignarle a cada una su propio retraso listando los valores en el mismo orden que en transition-property. La lista de retrasos se empareja con la lista de propiedades: aquí width comienza de inmediato, mientras que background-color espera un segundo.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        width: 150px;
        height: 150px;
        background: #8ebf42;
        transition-property: width, background-color;
        transition-duration: 1s, 1s;
        transition-delay: 0s, 1s;
      }
      div:hover {
        width: 300px;
        background-color: #1c8470;
      }
    </style>
  </head>
  <body>
    <h2>Staggered transition-delay</h2>
    <p>Hover: the width grows first, then the color changes a second later.</p>
    <div></div>
  </body>
</html>

Casos de uso comunes

Escalonar animaciones para que varios elementos (o varias propiedades de un elemento) se muevan uno tras otro en lugar de hacerlo todos a la vez, creando una sensación más pulida.
Menús con intención de hover. Un pequeño retraso en el cierre de un menú desplegable (a menudo combinado con un retraso en visibility) mantiene el menú abierto brevemente para que un movimiento de ratón ligeramente impreciso no lo cierre.
Retrasos negativos para iniciar un efecto ya "en curso", útil cuando quieres que un elemento llegue a un punto específico de su transición de inmediato.

Valores

Valor	Descripción
time	Especifica cuántos segundos o milisegundos debe esperar un efecto de transición antes de comenzar. El valor predeterminado es 0s.
initial	Hace que la propiedad use su valor predeterminado.
inherit	Hereda la propiedad de su elemento padre.

Práctica

¿Cuál afirmación es correcta sobre la propiedad transition-delay?

Especifica cuándo debe terminar el efecto de transición.El valor predeterminado es 0s, lo que significa que el efecto de transición no comenzará.Un valor negativo iniciará el efecto de transición de inmediato.