Il miglior tutorial CSS3 proprietà di transizione-timing-function Nel 2024, in questo tutorial puoi imparare Esempi,Supporto per il browser,Attributo definizioni e le istruzioni,grammatica,Altri esempi,Esempi,Esempi,
Transizioni alla stessa velocità, dall'inizio alla fine:
I dati riportati nella tabella rappresentano il primo browser a supportare il numero di versione della proprietà.
Subito dopo la -webkit- digitale, -MS- o -moz- fa a sostegno del prefisso attribuiscono primo numero di versione del browser.
属性 | |||||
---|---|---|---|---|---|
transition-timing-function | 26.0 4.0 -webkit- |
10.0 | 16.0 4.0 -moz- |
6.1 3.1 -webkit- |
12.1 10.5 -o- |
Proprietà di transizione-timing-funzione specifica una velocità di effetto di transizione.
Questa proprietà consente un effetto di transizione per cambiare la velocità della sua durata.
predefinito: | alleviare |
---|---|
ereditarietà: | no |
versione: | CSS3 |
sintassi JavaScript: | object .style.transitionTimingFunction = "lineare" |
valore | descrizione |
---|---|
lineare | Rifornimento alla stessa velocità per avviare l'effetto di transizione estremità (pari cubo-Bezier (0,0,1,1)). |
alleviare | Fornitura avvio lento, poi veloce, poi lento fine effetti di transizione (cubo-Bezier (0.25,0.1,0.25,1)). |
facilità in | Disposizioni transitorie per l'effetto di un avvio lento (pari al cubo-Bezier (0.42,0,1,1)). |
la facilità-out | Disposizioni per la fine degli effetti di transizione lenta (equivalente cubica-Bezier (0,0,0.58,1)). |
facilità-in-out | Disposizioni transitorie in effetti inizia lento e finisce (pari cubo-Bezier (0.42,0,0.58,1)). |
cubic-bezier (n, n,n, n) | È possibile definire i propri valori nella funzione cubica-Bezier. Il valore possibile è un numero compreso tra 0-1. |
Suggerimento: Prova i diversi valori negli esempi qui sotto per capire come funziona!
Per capire meglio la funzione di diversi valori: Ci sono cinque diversi elementi div, con cinque valori diversi:
E l'esempio precedente, ma specifica la curva di velocità funzione cubica Bezier: