Proprietà transition-property

La proprietà transition-property imposta la proprietà che sarà animata con una transizione fluida transition. Come valore si deve passare il nome della proprietà CSS che sarà animata. Se si imposta il valore all (è impostato per impostazione predefinita) - saranno animate tutte le proprietà contemporaneamente.

Sintassi

selettore {
	transition-property: valore;
}

Esempio

Passa il mouse sul blocco - cambierà fluidamente la sua larghezza, poiché transition-property ha il valore width:

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

#elem {
	border: 1px solid black;
	transition-duration: 2s;
	transition-property: width;
	height: 50px;
	width: 100px;
}
#elem:hover {
	width: 400px;
}

Esempio . Valore all

In questo esempio transition-property ha il valore all - quindi cambieranno fluidamente tutte le proprietà, scritte per lo stato hover (nel nostro caso sono width e height). Tutti i cambiamenti avverranno nello stesso tempo, che è impostato in transition-duration:

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

#elem {
	border: 1px solid black;
	transition-duration: 2s;
	transition-property: all;
	height: 25px;
	width: 100px;
}
#elem:hover {
	height: 50px;
	width: 400px;
}

Vedi anche

la proprietà transition-duration,
che imposta la durata della transizione fluida
la proprietà transition-delay,
che imposta il ritardo prima della transizione fluida
la proprietà transition-timing-function,
che imposta la funzione di temporizzazione per la transizione fluida
la proprietà transition,
che è la forma abbreviata per la transizione fluida
la proprietà animation,
con cui si può creare un'animazione