Proprietà transition CSS

Definizione e uso

L'attributo transition è un attributo abbreviato utilizzato per impostare quattro attributi di transizione:

Nota:Imposta sempre transition-duration Se non viene impostato l'attributo, l'effetto di transizione non avverrà se l'intervallo è 0.

Metti il puntatore del mouse sull'elemento div, la sua larghezza passerà da 100px a 300px gradualmente:

div {
  width: 100px;
  transition: width 2s;
}

transition: property duration timing-function delay;

Valore	Descrizione
transition-property	Stabilisce il nome dell'attributo CSS per il quale viene impostato l'effetto di transizione.
transition-duration	Stabilisce quanti secondi o millisecondi sono necessari per completare l'effetto di transizione.
transition-timing-function	Stabilisce la curva di velocità dell'effetto di velocità.
transition-delay	Definisce quando inizia l'effetto di transizione.

Valore predefinito:	all 0 ease 0
Ereditarietà:	no
Versione:	CSS3
Sintassi JavaScript:	object.style.transition="width 2s"

I numeri nella tabella indicano la prima versione del browser che supporta completamente l'attributo.

I numeri con -webkit-、-moz- o -o- rappresentano la prima versione utilizzata con il prefisso.

Chrome	IE / Edge	Firefox	Safari	Opera
26.0 4.0 -webkit-	10.0	16.0 4.0 -moz-	6.1 3.1 -webkit-	12.1 10.5 -o-