Manuale di riferimento CSS

Regole @CSS (RULES)

Completo di attributi CSS

Proprietà transition-property CSS3 Proprietà transition-delay CSS3

Metodo di utilizzo e esempio dell'attributo transition-duration CSS3

L'attributo transition-duration CSS specifica il numero di secondi o millisecondi necessari per completare l'animazione di transizione.

La tabella seguente fornisce una descrizione dell'uso di questo attributo e la cronologia delle versioni, nonché la sintassi di utilizzo dell'attributo nel linguaggio JavaScript.

Valore predefinito:	0s
Applicabile a:	Tutti gli elementi ::before e ::after Elemento pseudo
Ereditarietà:	No
Animabile:	No.Vedere anche Proprietà animazione.
Versione:	Nuova funzionalità CSS3
Sintassi JavaScript:	oggetto.style.transitionDuration="5s"

Sintassi dell'uso di transition-duration

La sintassi di questa proprietà è la seguente:

transition-duration:　time　|　initial　|　inherit

Ecco un esempio che dimostra come utilizzare la proprietà transition-duration.

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
time	Specificare il tempo necessario per completare la transizione. Il valore predefinito è 0s. I valori negativi non sono validi.
initial	Imposta questa proprietà al suo valore predefinito.
inherit	Se specificato, l'elemento correlato adotta il valore della proprietà transition-duration dell'elemento padre.

Compatibilità del browser

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

	Firefox 5+ ^-moz-, 15 + Google Chrome 4+ ^-webkit- Internet Explorer 10+ Apple Safari 4+ ^-webkit- Opera 12+ ^-o-, 15+ ^-webkit-

Leggi di più

Ecco alcune guide da consultare:CSS3 Transitions.

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

Proprietà transition-property CSS3 Proprietà transition-delay CSS3