Propiedad CSS transition-delay

La propiedad CSS transition-delay especifica cuándo debe comenzar el efecto de transición.

El valor predeterminado es 0s, lo que significa que el efecto de transición comienza de inmediato.

El desplazamiento de tiempo especificado retrasa el inicio de la animación. También se permiten valores negativos. Un retraso negativo hace que la transición comience a mitad de su línea de tiempo de animación.

El valor puede ser un tiempo en segundos o milisegundos, o una lista separada por comas de valores de tiempo. Cuando se proporcionan varios valores, se asignan a las propiedades correspondientes en la lista transition-property. Esta propiedad también está incluida en la propiedad abreviada transition.

INFO

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

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

Sintaxis

css

transition-delay: time | initial | inherit;

Ejemplo de la propiedad transition-delay:

Ejemplo de código CSS transition-delay

html

<!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>

Try it Yourself »

Ejemplo de la propiedad transition-delay con un retraso de 2 segundos:

Otro ejemplo de código CSS transition-delay

html

<!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>

Try it Yourself »

Valores

Valor	Descripción
time	Especifica cuántos segundos o milisegundos debe esperar un efecto de transición para 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

¿Qué 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.

Propiedad CSS transition-delay ​

Sintaxis ​

Ejemplo de la propiedad transition-delay: ​

Ejemplo de la propiedad transition-delay con un retraso de 2 segundos: ​