CSS3 proprietà di animazione-timing-function
Esempi
Dall'inizio alla fine con la stessa velocità riprodurre l'animazione:
-webkit-animation-timing-function:linear; /* Safari and Chrome */
Prova »
In fondo a questa pagina per ulteriori esempi.
Supporto per il browser
| 属性 | |||||
|---|---|---|---|---|---|
| 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- |
le definizioni e le istruzioni tag
Come animazione-timing-Funzione Specifica l'animazione completerà un ciclo.
film definizione della curva di velocità da un foglio di stile CSS in un altro periodo di tempo.
curva di velocità è usato per cambiare più liscia.
| predefinito: | alleviare |
|---|---|
| ereditarietà: | no |
| versione: | CSS3 |
| sintassi JavaScript: | object object.style.animationTimingFunction = "lineare" |
grammatica
Funzioni matematiche di animazione-timing-funzione d'uso, chiamata la curva cubica di Bezier, la curva di velocità. Con questa funzione, è possibile utilizzare i propri valori, o utilizzare uno dei valori predefiniti:
| valore | descrizione | prova |
|---|---|---|
| lineare | Animazione dall'inizio alla fine con la stessa velocità. | prova |
| alleviare | Predefinito. Anime ha cominciato a bassa velocità, poi accelerare, rallentare alla fine. | prova |
| facilità in | Animazione inizia a bassa velocità. | prova |
| la facilità-out | Animazione a fascia bassa. | prova |
| facilità-in-out | inizio Animazione e fine a bassa velocità. | prova |
| cubic-bezier (n, n,n, n) | Nella funzione cubica-Bezier nei propri valori. I valori consentiti sono compresi tra 0-1 valori. |
Suggerimento: Prova la funzione seguente "provare" utilizzare un valore diverso.
Esempi online
Esempi
Per meglio comprendere i diversi valori delle funzioni di temporizzazione, è prevista una serie di cinque diversi valori di cinque diversi elementi div:
#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;}
/* Firefox: */
#div1 {-moz-animation-timing-function: linear;}
#div2 {-moz-animation-timing-function: ease;}
#div3 {-moz-animation-timing-function: ease-in;}
#div4 {-moz-animation-timing-function: ease-out;}
#div5 {-moz-animation-timing-function: ease-in-out;}
/* Safari and Chrome: */
#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;}
Prova »
Esempi
La stessa dell'esempio precedente, ma è definita dalla funzione cubica-bezier curva di velocità:
#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);}
/* Firefox: */
#div1 {-moz-animation-timing-function: cubic-bezier(0,0,1,1;}
#div2 {-moz-animation-timing-function: cubic-bezier(0.25,0.1,0.25,1);}
#div3 {-moz-animation-timing-function: cubic-bezier(0.42,0,1,1);}
#div4 {-moz-animation-timing-function: cubic-bezier(0,0,0.58,1);}
#div5 {-moz-animation-timing-function: cubic-bezier(0.42,0,0.58,1);}
/* Safari and Chrome: */
#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);}
Prova »
articoli correlati
CSS3 tutorial: CSS3 Animazione