Proprietà transition-delay

La proprietà transition-delay imposta un ritardo prima dell'avvio di una transizione fluida transition.

Sintassi

selettore {
	transition-delay: tempo in s o ms;
}

Valori

Valore	Descrizione
`s`	Specifica il tempo in secondi (ad esempio `3s`). È possibile specificare valori frazionari, ad esempio, `0.5s` - mezzo secondo.
`ms`	Specifica il tempo in millisecondi (ad esempio `3ms`). Un secondo è `1000` millisecondi.

Valore predefinito: 0s.

Esempio

Passa il mouse sul blocco - per 3 secondi non succederà nulla (è impostato un ritardo di 3s), e poi cambierà gradualmente la sua larghezza in 2 secondi. Se poi si allontana il mouse - di nuovo per 3 secondi non succederà nulla, e poi la larghezza diminuirà gradualmente al valore originale:

<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;
}

Esempio

Passa il mouse sul blocco - prima cambierà la sua larghezza in 2 secondi, e poi cambierà la sua altezza in 4 secondi. Le proprietà cambieranno in sequenza, poiché per l'altezza è impostato un ritardo di 3 secondi (tempo di cambiamento della larghezza). Se si toglie il mouse - i cambiamenti avverranno nell'ordine inverso: prima diminuirà la larghezza, e poi diminuirà l'altezza:

<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;
}

Vedi anche

la proprietà transition-property,
che specifica il nome della proprietà per una transizione fluida
la proprietà transition-duration,
che specifica la durata di una transizione fluida
la proprietà transition-timing-function,
che specifica la funzione di temporizzazione per una transizione fluida
la proprietà transition,
che è una scorciatoia per una transizione fluida
la proprietà animation,
con cui è possibile creare un'animazione