Propiedad transition-delay

La propiedad transition-delay establece el retardo antes de iniciar la transición suave transition.

Sintaxis

cssselector {
  transition-delay: tiempo en s o ms;
}

Valores

Valor por defecto: 0s.

Ejemplo

Pase el cursor del ratón sobre el bloque - durante 3 segundos no pasará nada (hay un retardo de 3s), y luego cambiará su anchura suavemente en 2 segundos. Si luego quita el cursor - de nuevo durante 3 segundos no pasará nada, y luego la anchura disminuirá suavemente hasta el valor original:

html<div id="elem"></div>

css#elem {
  border: 1px solid black;
  transition-duration: 2s;
  transition-property: width;
  transition-delay: 3s;
  height: 50px;
  width: 100px;
}
#elem:hover {
  width: 400px;
}

Результат:

Ejemplo

Pase el cursor del ratón sobre el bloque - primero cambiará su anchura en 2 segundos, y luego cambiará su altura en 4 segundos. Las propiedades cambiarán secuencialmente, ya que para la altura está establecido un retardo de 3 segundos (tiempo de cambio de la anchura). Si quita el cursor - los cambios ocurrirán en el orden inverso: primero disminuirá la anchura, y luego disminuirá la altura:

html<div id="elem"></div>

css#elem {
  border: 1px solid black;
  transition-duration: 2s, 4s;
  transition-property: width, height;
  transition-delay: 0s, 3s;
  width: 100px;
  height: 25px;
}
#elem:hover {
  width: 400px;
  height: 50px;
}

Результат:

Véase también