steps()
CSS steps() funksiyasi animatsiyalar uchun bosqichli vaqt funksiyasini (timing function) yaratishda ishlatiladi.
Bu funksiya animatsiya davomiyligini ko‘rsatilgan sondagi (n) teng uzunlikdagi oraliqlarga bo‘ladi. Masalan: agar n 4 ga teng bo‘lsa, animatsiya 4 qismga bo‘linadi. U 0% dan 100% gacha bo‘lgan davomiylikni 4 qismga bo‘ladi, ular mos ravishda 0%-25%, 25%-50%, 50%-75% va 75%- 100%.
Misol
Animatsiyalar uchun turli bosqichli vaqt funksiyalarini yarating:
div.a {
animation: mymove 5s steps(4, end);
}
div.b {
animation: mymove 5s steps(6, jump-start);
}
div.c {
animation: mymove 5s steps(4, jump-none);
}
div.d {
animation: mymove 5s steps(4, jump-both);
}
O‘zingiz sinab ko‘ring »
Brauzerlarda qo‘llab-quvvatlash
Jadvaldagi sonlar funksiyani to‘liq qo‘llab-quvvatlaydigan birinchi brauzer versiyasini ko‘rsatadi.
| Funksiya | |||||
|---|---|---|---|---|---|
| steps() | 77 | 79 | 65 | 14 | 64 |
CSS sintaksisi
steps(n, step-position)
| Qiymat | Tavsif |
|---|---|
| n | Majburiy. Bosqichlar/oraliqlar sonini belgilaydi |
| step-position | Ixtiyoriy. Qiymatlar orasidagi sakrash qachon sodir bo‘lishini belgilaydi. Quyidagi kalit so‘zlardan birini ishlating:
|
| Versiya: | CSS Easing Functions, 1-daraja |
|---|
Tegishli sahifalar
CSS ma’lumotnomasi: CSS animation xususiyati.
CSS ma’lumotnomasi: CSS animation-timing-function xususiyati.
W3Schools Pathfinder
Yutuqlaringizni kuzating – bu bepul!