Proprietà transition

La proprietà transition è un'abbreviazione per le transizioni fluide, permette di impostare contemporaneamente transition-duration, transition-property, transition-timing-function e transition-delay.

Sintassi

cssselettore {
  transition: valore;
}

L'ordine delle proprietà non ha importanza, tuttavia il tempo di esecuzione (transition-duration) deve essere posizionato prima del ritardo (transition-delay).

Valori

Vedi le proprietà corrispondenti. Valore predefinito: all 0s ease 0s.

Il valore none annulla tutte le transizioni (avverranno istantaneamente).

Esempio

Passa il mouse sul blocco - per 3 secondi non succederà nulla (c'è un ritardo di 3s), e poi cambierà gradualmente la sua larghezza in 2 secondi. Se poi togli 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: width 2s ease 3s;
  width: 100px;
  height: 50px;
}
#elem:hover {
  width: 400px;
}

Результат:

Vedi anche