animation-timing-function
Misol
Animatsiyani boshidan oxirigacha bir xil tezlikda ijro eting:
div {
animation-timing-function: linear;
}
O‘zingiz sinab ko‘ring »
Quyida ko‘proq "O‘zingiz sinab ko‘ring" misollari keltirilgan.
Ta’rif va qo‘llanilishi
animation-timing-function animatsiyaning tezlik egri chizig‘ini belgilaydi.
Tezlik egri chizig‘i animatsiyaning bir CSS uslublar to‘plamidan boshqasiga o‘tishi uchun sarflaydigan VAQTini belgilaydi.
Tezlik egri chizig‘i o‘zgarishlarni silliq qilish uchun ishlatiladi.
| Standart qiymat: | ease |
|---|---|
| Meros qilinadi: | yo‘q |
| Animatsiya qilinadi: | yo‘q. animatable haqida o‘qing |
| Versiya: | CSS3 |
| JavaScript sintaksisi: | object.style.animationTimingFunction="linear" Sinab ko‘ring |
Brauzerlarda qo‘llab-quvvatlash
Jadvaldagi sonlar xususiyatni to‘liq qo‘llab-quvvatlaydigan birinchi brauzer versiyasini ko‘rsatadi.
| Xususiyat | |||||
|---|---|---|---|---|---|
| animation-timing-function | 43 | 10 | 16 | 9 | 30 |
CSS sintaksisi
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;
animation-timing-function tezlik egri chizig‘ini hosil qilish uchun kubik Bezye egri chizig‘i (Cubic Bezier curve) deb ataladigan matematik funksiyadan foydalanadi. Bu funksiyada o‘z qiymatlaringizdan yoki oldindan belgilangan qiymatlardan biridan foydalanishingiz mumkin:
Xususiyat qiymatlari
| Qiymat | Tavsif | Demo |
|---|---|---|
| linear | Animatsiya boshidan oxirigacha bir xil tezlikda bo‘ladi | Sinab ko‘ring » |
| ease | Standart qiymat. Animatsiya sekin boshlanadi, keyin tezlashadi va tugashidan oldin sekinlashadi | Sinab ko‘ring » |
| ease-in | Animatsiya sekin boshlanadi | Sinab ko‘ring » |
| ease-out | Animatsiya sekin tugaydi | Sinab ko‘ring » |
| ease-in-out | Animatsiya sekin boshlanadi va sekin tugaydi | Sinab ko‘ring » |
| step-start | steps(1, start) ga teng | |
| step-end | steps(1, end) ga teng | |
| steps(int,step-position) | Ikki parametrli qadamli funksiyani belgilaydi. Birinchi parametr qadamlar/intervallar sonini belgilaydi. Ikkinchi parametr qiymatlar orasidagi sakrash qachon sodir bo‘lishini belgilaydi | |
| cubic-bezier(n,n,n,n) | cubic-bezier funksiyasida o‘z qiymatlaringizni belgilang Mumkin bo‘lgan qiymatlar 0 dan 1 gacha bo‘lgan sonlardir |
|
| initial | Bu xususiyatni standart qiymatiga o‘rnatadi. initial haqida o‘qing | |
| inherit | Bu xususiyatni ota elementidan meros qilib oladi. inherit haqida o‘qing |
Maslahat: Quyidagi "Ko‘proq misollar" bo‘limida turli qiymatlarni sinab ko‘ring.
Ko‘proq misollar
Misol
Turli vaqt funksiyasi (timing function) qiymatlarini yaxshiroq tushunish uchun;
Quyida beshta turli qiymatga ega beshta turli <div> elementi berilgan:
#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;}
O‘zingiz sinab ko‘ring »
Misol
Yuqoridagi misol bilan bir xil, ammo tezlik egri chiziqlari cubic-bezier funksiyasi yordamida belgilangan:
#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);}
O‘zingiz sinab ko‘ring »
Tegishli sahifalar
CSS darsligi: CSS animatsiyalar
HTML DOM ma’lumotnomasi: animationTimingFunction xususiyati
W3Schools Pathfinder
Yutuqlaringizni kuzating – bu bepul!