English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
L'attributo CSS transition ti permette di definire la transizione tra due stati visivi dell'elemento. Questo ètransition-property,transition-duration,transition-timing-functionetransition-delayProprietà abbreviate
La tabella sottostante fornisce una descrizione dell'uso e la cronologia delle versioni di questa proprietà, nonché la sua sintassi di utilizzo nel script JavaScript.
| Valore predefinito: | tutti 0 ease 0; Visualizza tutte le proprietà |
|---|---|
| Applicabile a: | Tutti gli elementi::before e::after Elementi pseudo |
| Ereditarietà: | Nessuno |
| Animabile: | No.Si prega di consultare Proprietà dell'animazione. |
| Versione: | Nuova funzione CSS3 |
| Sintassi JavaScript: | oggetto.style.transition="larghezza 2s" |
La sintassi di questa proprietà è la seguente:
transition: transition1 [, transition2, ... transitionN] | initial | inherit dove transition è: [ transition-property | transition-duration | transition-timing-function | transition-delay ]
Il seguente esempio dimostra come utilizzare l'attributo transition.
button {
background: #fd7c2a;
-webkit-transition-property: background 2s; /* Per Safari 3.0+ */
transition: background 2s;
}
button:hover {
background: #3cc16e;
}Prova a vedere‹/›La tabella sottostante descrive i valori di questa proprietà.
| Valore | Descrizione |
|---|---|
| transition-property | Specificare il nome dell'attributo CSS a cui applicare l'effetto di transizione. |
| transition-duration | Specificare il numero di secondi o millisecondi necessari per completare l'animazione di transizione. |
| transition-timing-function | Specificare come calcolare il valore intermedio dell'attributo CSS influenzato dalla transizione. |
| transition-delay | Specificare quando iniziare la transizione. |
| initial | Imposta questa proprietà al suo valore predefinito. |
| inherit | Se specificato, l'elemento correlato utilizza il valore dell'attributo transition del suo elemento padre. |
Compatibilità del browser per l'attributo transition, i numeri nella tabella sottostante rappresentano la versione minima del browser che supporta l'attributo; tutti i browser mainstream supportano questa proprietà.
|
Si prega di consultare la seguente guida:CSS3 Transitions.
Proprietà correlate:transition-delay,transition-duration,transition-property,transition-timing-function.