transition-timing-function
Misol
Boshidan oxirigacha bir xil tezlikdagi o‘tish effekti:
div {
transition-timing-function: linear;
}
O‘zingiz sinab ko‘ring »
Ta’rif va qo‘llanilishi
transition-timing-function xususiyati o‘tish effektining tezlik egri chizig‘ini belgilaydi.
Bu xususiyat o‘tish effektiga o‘z davomiyligi mobaynida tezligini o‘zgartirish imkonini beradi.
| Standart qiymat: | ease |
|---|---|
| Meros qilinadi: | yo‘q |
| Animatsiya qilinadi: | yo‘q. animatable haqida o‘qing |
| Versiya: | CSS3 |
| JavaScript sintaksisi: | object.style.transitionTimingFunction="linear" Sinab ko‘ring |
Brauzerlarda qo‘llab-quvvatlash
Jadvaldagi sonlar xususiyatni to‘liq qo‘llab-quvvatlaydigan birinchi brauzer versiyasini ko‘rsatadi.
| Xususiyat | |||||
|---|---|---|---|---|---|
| transition-timing-function | 26 | 12 | 16 | 9 | 12.1 |
CSS sintaksisi
transition-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;
Xususiyat qiymatlari
| Qiymat | Tavsif |
|---|---|
| ease | Standart qiymat. Sekin boshlanadigan, so‘ng tezlashadigan va oxirida yana sekinlashadigan o‘tish effektini belgilaydi (cubic-bezier(0.25,0.1,0.25,1) ga teng) |
| linear | Boshidan oxirigacha bir xil tezlikdagi o‘tish effektini belgilaydi (cubic-bezier(0,0,1,1) ga teng) |
| ease-in | Sekin boshlanadigan o‘tish effektini belgilaydi (cubic-bezier(0.42,0,1,1) ga teng) |
| ease-out | Sekin tugaydigan o‘tish effektini belgilaydi (cubic-bezier(0,0,0.58,1) ga teng) |
| ease-in-out | Sekin boshlanib, sekin tugaydigan o‘tish effektini belgilaydi (cubic-bezier(0.42,0,0.58,1) ga teng) |
| step-start | steps(1, start) ga teng |
| step-end | steps(1, end) ga teng |
| steps(int,start|end) | Ikki parametrli pog‘onali (stepping) funksiyani belgilaydi. Birinchi parametr funksiyadagi intervallar sonini belgilaydi. U musbat butun son (0 dan katta) bo‘lishi kerak. Ikkinchi parametr ixtiyoriy bo‘lib, "start" yoki "end" qiymatiga ega bo‘ladi va interval ichida qiymatlar o‘zgarishi sodir bo‘ladigan nuqtani belgilaydi. Agar ikkinchi parametr tushirib qoldirilsa, unga "end" qiymati beriladi |
| cubic-bezier(n,n,n,n) | cubic-bezier funksiyasida o‘z qiymatlaringizni belgilang. Mumkin bo‘lgan qiymatlar — 0 dan 1 gacha bo‘lgan sonlar |
| initial | Bu xususiyatni standart qiymatiga o‘rnatadi. initial haqida o‘qing |
| inherit | Bu xususiyatni ota elementidan meros qilib oladi. inherit haqida o‘qing |
Maslahat: Qanday ishlashini tushunish uchun quyidagi misollardagi turli qiymatlarni sinab ko‘ring!
Ko‘proq misollar
Misol
Turli funksiya qiymatlarini yaxshiroq tushunish uchun: bu yerda beshta turli qiymatga ega beshta div elementi berilgan:
#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;}
O‘zingiz sinab ko‘ring »
Misol
Yuqoridagi misol bilan bir xil, lekin tezlik egri chiziqlari cubic-bezier funksiyasi bilan belgilangan:
#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);}
O‘zingiz sinab ko‘ring »
Tegishli sahifalar
CSS darsligi: CSS o‘tishlar
HTML DOM ma’lumotnomasi: transitionTimingFunction xususiyati
W3Schools Pathfinder
Yutuqlaringizni kuzating – bu bepul!