English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
L'attributo transition-timing-function CSS specifica la velocità dell'effetto di transizione. Questo attributo permette a un effetto di transizione di modificare la velocità della sua durata.
La tabella sottostante fornisce una descrizione dell'uso e la cronologia delle versioni di questo attributo, nonché la sintassi dell'uso in script JavaScript.
| Valore predefinito: | ease |
|---|---|
| Valido per: | Tutti gli elementi::before e::after Elementi pseudo |
| Ereditarietà: | Nessuno |
| Animabile: | No.Vedere: Proprietà animazione. |
| Versione: | Nuova funzionalità CSS3 |
| Sintassi JavaScript: | oggetto.style.transitionTimingFunction="ease-in" |
La sintassi di questo attributo è la seguente:
transition-timing-function: lineare | ease | ease-in | ease-out | ease-in-out | cubic-bezier(n,n,n,n) | initial | inherit
Esempio di come utilizzare l'attributo transition-timing-function.
button {
background: #fd7c2a;
/* For Safari 3.0+ */
-webkit-transition-property: background;
-webkit-transition-duration: 2s;
-webkit-transition-timing-function: linear;
transition-property: background;
transition-duration: 2s;
transition-timing-function: linear;
}
button:hover {
background: #3cc16e;
}Prova a vedere‹/›La tabella sottostante descrive i valori di questo attributo.
| Valore | Descrizione |
|---|---|
| linear | Specifica una transizione a velocità costante dall'inizio allo stato finale. |
| ease | Simile a ease-in-out, ma accelera più rapidamente all'inizio e inizia a decelerare vicino allo stato finale. |
| ease-in | Specifica che la transizione inizia lentamente e poi si accelera gradualmente fino a raggiungere lo stato finale e poi si ferma improvvisamente. |
| ease-out | Specifica che la transizione inizia rapidamente e poi si rallenta man mano che si avvicina allo stato finale. |
| ease-in-out | Specifica che la transizione inizia lentamente, poi si accelera e infine si decelera. |
| cubic-bezier(n,n,n,n) | Definisce una curva di Bezier a tre punti. Anche chiamata curva di velocità. I valori possibili sono numeri tra 0 e 1. |
| initial | Imposta questo attributo al suo valore predefinito. |
| inherit | Se specificato, l'elemento correlato utilizza il valore dell'attributo transition-timing-function dell'elemento padre. |
Compatibilità dei browser per l'attributo transition-timing-function, i numeri nella tabella sotto rappresentano la versione minima del browser che supporta l'attributo; tutti i browser mainstream supportano questo attributo.
|
Si prega di consultare la seguente guida:CSS3 Transitions.
Proprietà correlate:transition,transition-delay,transition-property,transition-duration.