Propiedad transition-delay

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

Sintaxis

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

Valores

Valor	Descripción
`s`	Especifica el tiempo en segundos (por ejemplo `3s`). Se pueden especificar valores fraccionarios, por ejemplo, `0.5s` - medio segundo.
`ms`	Especifica el tiempo en milisegundos (por ejemplo `3ms`). Un segundo son `1000` milisegundos.

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:

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

#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:

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

#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

la propiedad transition-property,
que establece el nombre de la propiedad para la transición suave
la propiedad transition-duration,
que establece la duración de la transición suave
la propiedad transition-timing-function,
que establece la función de temporización para la transición suave
la propiedad transition,
que es la abreviatura para la transición suave
la propiedad animation,
con la que se puede hacer una animación