Proprietà transition-delay

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

Sintassi

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

Valori

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:

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

Результат:

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:

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

Результат:

Vedi anche