Exemplu
Reda o animație cu aceeași viteză de la început până la sfârșit:
div {
-webkit-animation-timing-function: linear; /* Chrome, Safari,
Opera */
animation-timing-function: linear;
} Încearcă - l singur » Mai multe "Try it Yourself" - "Try it Yourself" exemplele de mai jos.
Definiție și utilizare
Animatia-temporizare-funcția specifică curba de viteză de o animație.
Curba de viteză definește timpul o animație care îl folosește pentru a schimba de la un set de stiluri CSS la alta.
Curba de viteză este folosit pentru a face schimbări fără probleme.
| Valoare implicită: | ease |
|---|---|
| Mostenit: | no |
| Animatable: | no. Read about animatable |
| Versiune: | CSS3 |
| sintaxa JavaScript: | object .style.animationTimingFunction="linear" Try it |
Suport pentru browser-
Numerele din tabel specifica prima versiune de browser care acceptă pe deplin proprietatea.
Numerele urmat de -webkit-, -moz- sau -o- specificați prima versiune care a lucrat cu un prefix.
| Proprietate | |||||
|---|---|---|---|---|---|
| animation-timing-function | 43.0 4.0 -webkit- | 10.0 | 16.0 5.0 -moz- | 9 4.0 -webkit- | 30.0 15,0 -webkit- 12,0 -o- |
CSS Sintaxa
animation-timing-function: linear|ease|ease-in|ease-out|ease-in-out|step-start|step-end|steps(int,start|end)|cubic-bezier( Animația-sincronizare-funcție utilizează o funcție matematică, numită curba Bezier Cubic, pentru a face curba de viteză. Puteți utiliza propriile valori în această funcție, sau de a folosi una dintre valorile pre-definite:
Valori de proprietate
Valoare Descriere Joaca-l linear Animația are aceeași viteză de la început până la sfârșit Joaca - l » ease Valoare implicită. Animația are un început lent, apoi rapid, înainte de a se termină încet Joaca - l » ease-in Animația are un început lent Joaca - l » ease-out Animația are un capăt lent Joaca - l » ease-in-out Animația are atât un start lent și un capăt lent Joaca - l » step-start Echivalent cu steps(1, start) step-end Echivalent cu steps(1, end) steps(int,start|end) Specifică o funcție pas cu pas, cu doi parametri. Primul parametru specifică numărul de intervale în funcție. Trebuie să fie un număr întreg pozitiv (greater than 0) . Al doilea parametru, care este opțional, este fie valoarea "start" sau "end" și specifică punctul în care schimbarea valorilor apar în intervalul. Dacă al doilea parametru este omis, acesta este dat valoarea "end" anului "end" cubic- bezier( n , n , n , n ) Definiți propriile valori în funcția Cubic-Bezier
Valorile posibile sunt valori numerice de la 0 la 1 initial Setează această proprietate la valoarea implicită. Citiți despre inițială inherit Mosteneste această proprietate de la elementul părinte. Citiți despre moștenesc
Tip: Încercați diferite valori în secțiunea te Încercați să - l mai jos.
Mai multe exemple
Exemplu
Pentru a înțelege mai bine diferitele valori ale funcției de sincronizare;
Aici sunt cinci diferite <div> elemente cu cinci valori diferite:
/* 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;}
Încearcă - l singur »
Exemplu
La fel ca exemplul de mai sus, dar curbele de viteză sunt definite cu funcția cubică-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);} Încearcă - l singur »
Pagini similare
Tutorial CSS3: CSS3 Animații
HTML DOM referință: animationTimingFunction property