Exemplu
Un efect de tranziție, cu aceeași viteză de la început până la sfârșit:
div {
-webkit-transition-timing-function: linear; /* Safari and Chrome */
transition-timing-function: linear;
}
Încearcă - l singur » Definiție și utilizare
Proprietatea de tranziție-temporizare-funcție specifică curba de viteză a efectului de tranziție.
Această proprietate permite un efect de tranziție pentru a schimba viteza peste durata acesteia.
| Valoare implicită: | ease |
|---|---|
| Mostenit: | no |
| Animatable: | no. Read about animatable |
| Versiune: | CSS3 |
| sintaxa JavaScript: | object .style.transitionTimingFunction="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 prima versiune care a lucrat cu un prefix.
| Proprietate | |||||
|---|---|---|---|---|---|
| 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- |
CSS Sintaxa
transition-timing-function: linear|ease|ease-in|ease-out|ease-in-out|step-start|step-end|steps(int,start|end)|cubic-bezier( Valori de proprietate Valoare Descriere ease Valoare implicită. Specifică un efect de tranziție cu un început lent, apoi rapid, apoi se încheie lent (equivalent to cubic- bezier(0.25,0.1,0.25,1) ) linear Specifică un efect de tranziție cu aceeași viteză de la început până la sfârșit (equivalent to cubic- bezier(0,0,1,1) ) ease-in Specifică un efect de tranziție cu un început lent (echivalent cu cubic- bezier(0.42,0,1,1) ) ease-out Specifică un efect de tranziție cu un capăt lent (echivalent cu cubic- bezier(0,0,0.58,1) ) ease-in-out Specifică un efect de tranziție cu un început lent și sfârșit (echivalent cu cubic- bezier(0.42,0,0.58,1) ) 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 exemplele de mai jos pentru a înțelege cum funcționează!
Mai multe exemple
Exemplu
Pentru a înțelege mai bine diferitele valori ale funcției: Aici sunt cinci elemente div diferite, cu cinci valori diferite:
/* For Safari 3.1 to 6.0 */
#div1 {-webkit-transition-timing-function: linear;}
#div2 {-webkit-transition-timing-function: ease;}
#div3 {-webkit-transition-timing-function: ease-in;}
#div4 {-webkit-transition-timing-function: ease-out;}
#div5 {-webkit-transition-timing-function: ease-in-out;}
/* Standard
syntax */
#div1 {transition-timing-function: linear;}
#div2 {transition-timing-function: ease;}
#div3 {transition-timing-function: ease-in;}
#div4 {transition-timing-function: ease-out;}
#div5 {transition-timing-function: ease-in-out;}
Încearcă - l singur »
Exemplu
La fel ca exemplul de mai sus, dar curbele de viteză sunt specificate cu funcția cubică-bezier:
/* For Safari 3.1 to 6.0 */
#div1 {-webkit-transition-timing-function: cubic-bezier(0,0,1,1;}
#div2 {-webkit-transition-timing-function: cubic-bezier(0.25,0.1,0.25,1);}
#div3 {-webkit-transition-timing-function: cubic-bezier(0.42,0,1,1);}
#div4 {-webkit-transition-timing-function: cubic-bezier(0,0,0.58,1);}
#div5 {-webkit-transition-timing-function: cubic-bezier(0.42,0,0.58,1);}
/* Standard syntax */
#div1 {transition-timing-function: cubic-bezier(0,0,1,1;}
#div2 {transition-timing-function: cubic-bezier(0.25,0.1,0.25,1);}
#div3 {transition-timing-function: cubic-bezier(0.42,0,1,1);}
#div4 {transition-timing-function: cubic-bezier(0,0,0.58,1);}
#div5 {transition-timing-function: cubic-bezier(0.42,0,0.58,1);}
Încearcă - l singur »
Pagini similare
Tutorial CSS: CSS3 Treceri
HTML DOM referință: transitionTimingFunction property