Esempio
Gioca un'animazione con la stessa velocità dall'inizio alla fine:
div {
-webkit-animation-timing-function: linear; /* Chrome, Safari,
Opera */
animation-timing-function: linear;
} Prova tu stesso " Più "Try it Yourself" esempi di seguito.
Definizione e utilizzo
Il-timing-funzione di animazione specifica la curva di velocità di un'animazione.
La curva di velocità definisce il tempo un'animazione utilizza per passare da un insieme di stili CSS all'altro.
La curva di velocità viene utilizzato per eseguire le modifiche senza intoppi.
| Valore di default: | ease |
|---|---|
| Inherited: | no |
| animatable: | no. Read about animatable |
| Versione: | CSS3 |
| sintassi JavaScript: | object .style.animationTimingFunction="linear" Try it |
Supporto per il browser
I numeri nella tabella indicano la prima versione del browser che supporta pienamente la proprietà.
Numeri seguiti da -webkit-, -moz-, o -o- specificare la prima versione che ha lavorato con un prefisso.
| Proprietà | |||||
|---|---|---|---|---|---|
| animation-timing-function | 43.0 4.0 -webkit- | 10.0 | 16,0 5.0 -moz- | 9.0 4.0 -webkit- | 30,0 15.0 -webkit- 12.0 -o- |
CSS Sintassi
animation-timing-function: linear|ease|ease-in|ease-out|ease-in-out|step-start|step-end|steps(int,start|end)|cubic-bezier(n,n,n,n)|initial|inherit; Il-timing-funzione di animazione utilizza una funzione matematica, chiamata curva di Bézier cubica, per rendere la curva di velocità. È possibile utilizzare i propri valori in questa funzione, o utilizzare uno dei valori predefiniti:
I valori delle proprietà
| Valore | Descrizione | Gioca |
|---|---|---|
| linear | L'animazione ha la stessa velocità dall'inizio alla fine | Gioca " |
| ease | Valore di default. L'animazione ha un avvio lento, poi veloce, prima che finisce lentamente | Gioca " |
| ease-in | L'animazione ha un avvio lento | Gioca " |
| ease-out | L'animazione ha una fine lenta | Gioca " |
| ease-in-out | L'animazione ha sia un inizio lento e una fine lenta | Gioca " |
| step-start | Equivalente a steps(1, start) | |
| step-end | Equivalente a steps(1, end) | |
| steps(int,start|end) | Specifica una funzione passo-passo, con due parametri. Il primo parametro specifica il numero di intervalli nella funzione. Deve essere un numero intero positivo (greater than 0) . Il secondo parametro, che è opzionale, è sia il valore "start" o "end" , e specifica il punto in cui il cambiamento dei valori avviene all'interno dell'intervallo. Se il secondo parametro viene omesso, si è dato il valore di "end" | |
| cubic-bezier( n , n , n , n ) | Definire i propri valori nella funzione cubica-Bezier I valori possibili sono i 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à |
Tip: Prova i diversi valori nella sezione di te Prova sottostante.
Altri esempi
Esempio
Per meglio comprendere i diversi valori della funzione di temporizzazione;
Qui ci sono cinque diversi <div> elementi con cinque valori diversi:
/* For Chrome, Safari and Opera */
#div1 {-webkit-animation-timing-function: linear;}
#div2 {-webkit-animation-timing-function: ease;}
#div3 {-webkit-animation-timing-function: ease-in;}
#div4 {-webkit-animation-timing-function: ease-out;}
#div5 {-webkit-animation-timing-function: ease-in-out;}
/* Standard
syntax */
#div1 {animation-timing-function: linear;}
#div2 {animation-timing-function: ease;}
#div3 {animation-timing-function: ease-in;}
#div4 {animation-timing-function: ease-out;}
#div5 {animation-timing-function: ease-in-out;}
Prova tu stesso " Esempio
Come nell'esempio precedente, ma le curve di velocità sono definite con la funzione cubica-bezier:
/* For Chrome, Safari and Opera */
#div1 {-webkit-animation-timing-function: cubic-bezier(0,0,1,1);}
#div2 {-webkit-animation-timing-function: cubic-bezier(0.25,0.1,0.25,1);}
#div3 {-webkit-animation-timing-function: cubic-bezier(0.42,0,1,1);}
#div4 {-webkit-animation-timing-function: cubic-bezier(0,0,0.58,1);}
#div5 {-webkit-animation-timing-function: cubic-bezier(0.42,0,0.58,1);}
/* Standard syntax */
#div1 {animation-timing-function: cubic-bezier(0,0,1,1);}
#div2 {animation-timing-function: cubic-bezier(0.25,0.1,0.25,1);}
#div3 {animation-timing-function: cubic-bezier(0.42,0,1,1);}
#div4 {animation-timing-function: cubic-bezier(0,0,0.58,1);}
#div5 {animation-timing-function: cubic-bezier(0.42,0,0.58,1);} Prova tu stesso " Pagine correlate
CSS3 tutorial: CSS3 animazioni
Di riferimento HTML DOM: animationTimingFunction property