Esempio
Modificare la curva di velocità di un effetto di transizione:
document.getElementById("myDIV").style.transitionTimingFunction = "linear";
Prova tu stesso " Definizione e l'utilizzo
La proprietà transitionTimingFunction specifica la curva di velocità dell'effetto di transizione.
Questa struttura permette un effetto di transizione per cambiare la velocità oltre la sua durata.
Supporto browser
La proprietà transitionTimingFunction è supportata in Internet Explorer 10, Firefox, Opera e Chrome.
Safari supporta in alternativa, la proprietà WebkitTransitionTimingFunction.
Nota: La proprietà transitionTimingFunction non è supportata in Internet Explorer 9 e versioni precedenti.
Sintassi
Restituire la proprietà transitionTimingFunction:
object .style.transitionTimingFunction Impostare la proprietà transitionTimingFunction:
object .style.transitionTimingFunction ="ease|linear|ease-in|ease-out|ease-in-out|cubic-bezier()|
initial|inherit"
I valori delle proprietà
| Valore | Descrizione |
|---|---|
| ease | Valore di default. Specifica un effetto di transizione con un avvio lento, poi veloce, quindi terminare lentamente (equivalent to cubic- bezier(0.25,0.1,0.25,1) ) |
| linear | Specifica un effetto di transizione con la stessa velocità dall'inizio alla fine (equivalent to cubic- bezier(0,0,1,1) ) |
| ease-in | Specifica un effetto di transizione con un avvio lento (equivalente a cubic- bezier(0.42,0,1,1) ) |
| ease-out | Specifica un effetto di transizione con un'estremità lento (equivalente a cubic- bezier(0,0,0.58,1) ) |
| ease-in-out | Specifica un effetto di transizione con un lento inizio e fine (equivalente a cubic- bezier(0.42,0,0.58,1) ) |
| cubic- bezier( n , n , n , n ) | Definire i propri valori nella funzione cubica-Bezier. I valori possibili sono valori numerici da 0 a 1 |
| initial | Consente di impostare questa proprietà al suo valore di default. Leggi iniziale |
| inherit | Eredita questo immobile dal suo elemento genitore. Leggi su erediterà |
Dettagli tecnici
| Valore di default: | alleviare |
|---|---|
| Valore di ritorno: | Una stringa, che rappresenta la struttura di transizione-timing-funzione di un elemento |
| CSS Version | CSS3 |
Pagine correlate
Riferimento CSS: transition-timing-function property
<Stile di oggetto