Manuale di riferimento CSS

Regole CSS (RULES)

Manuale completo delle proprietà CSS

Proprietà transition-timing-function CSS3 Proprietà transition-duration CSS3

Metodi di utilizzo e esempi dell'attributo CSS transition-property

L'attributo CSS transition-property specifica il nome dell'attributo CSS a cui deve essere applicato l'effetto di transizione.

La tabella sottostante fornisce la descrizione dell'uso e la cronologia delle versioni di questa proprietà, nonché la sintassi di utilizzo dell'attributo nel linguaggio JavaScript.

Valore predefinito:	all
Applicabile a:	Tutti gli elementi ::before e ::after Elementi pseudo
Ereditarietà:	Nessuno
Animabile:	No.Vedere: Proprietà dell'animazione.
Versione:	Nuove funzionalità di CSS3
Sintassi JavaScript:	oggetto.style.transitionProperty="width,height"

Sintassi dell'uso di transition-property

La sintassi di questa proprietà è la seguente:

transition-property:　　[,　, ... ]　|　none　|　all　|　initial　|　inherit
　where　　is　a　CSS　property　name

Il seguente esempio dimostra come utilizzare la proprietà transition-property.

Esempio

button　{
　　　　background:　#fd7c2a;
　　　　/*　Per　Safari　3.0+　*/
　　　　-webkit-transition-property:　background;
　　　　-webkit-transition-duration:　2s;
　　　　
　　　　transition-property:　background;
　　　　transition-duration:　2s;
}
button:hover　{
　　　　background:　#3cc16e;
}

Prova a vedere‹/›

Valore dell'attributo

La tabella sottostante descrive i valori di questa proprietà.

Valore	Descrizione
none	Nessuna proprietà riceverà l'effetto di transizione.
all	Tutte le proprietà riceveranno l'effetto di transizione. Questo è il valore predefinito.
initial	Imposta questa proprietà al suo valore predefinito.
inherit	Se specificato, l'elemento correlato adotta il valore della proprietà transition-property dell'elemento genitore.

Compatibilità del browser

La compatibilità del browser per la proprietà transition-property, i numeri nella tabella sottostante rappresentano la versione minima del browser che supporta questa proprietà; tutti i browser mainstream supportano questa proprietà.

	Firefox 4+ ^-moz-, 16 + Google Chrome 4+ ^-webkit-, 26 + Internet Explorer 10+ Apple Safari 3.1+ ^-webkit-, 6.1+ Opera 10.5+ ^-o-, 12.1+

Leggi di più

Si prega di consultare la seguente guida:CSS3 Transitions.

Proprietà correlate:transition,transition-delay,transition-duration,transition-timing-function.

Proprietà transition-timing-function CSS3 Proprietà transition-duration CSS3