transitionTimingFunction
Misol
O‘tish effektining tezlik egri chizig‘ini o‘zgartiring:
document.getElementById("myDIV").style.transitionTimingFunction = "linear";O‘zingiz sinab ko‘ring »
Tavsif
transitionTimingFunction xususiyati o‘tish effektining tezlik egri chizig‘ini belgilaydi.
Bu xususiyat o‘tish effektiga davomiyligi davomida tezligini o‘zgartirish imkonini beradi.
Brauzerlarda qo‘llab-quvvatlash
Jadvaldagi sonlar xususiyatni to‘liq qo‘llab-quvvatlaydigan birinchi brauzer versiyasini ko‘rsatadi.
| Xususiyat | |||||
|---|---|---|---|---|---|
| transitionTimingFunction | 26.0 | 10.0 | 16.0 | 6.1 | 12.1 |
Sintaksis
transitionTimingFunction xususiyatini qaytarish:
object.style.transitionTimingFunction
transitionTimingFunction xususiyatini o‘rnatish:
object.style.transitionTimingFunction = "ease|linear|ease-in|ease-out|ease-in-out|cubic-bezier()|
initial|inherit"
Xususiyat qiymatlari
| Qiymat | Tavsif |
|---|---|
| ease | Standart qiymat. Sekin boshlanib, keyin tezlashadigan va oxirida sekin tugaydigan 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) |
| 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 |
Texnik tafsilotlar
| Standart qiymat: | ease |
|---|---|
| Qaytariladigan qiymat: | Elementning transition-timing-function xususiyatini ifodalovchi String |
| CSS versiyasi | CSS3 |
Tegishli sahifalar
CSS ma’lumotnomasi: transition-timing-function xususiyati
W3Schools Pathfinder
Yutuqlaringizni kuzating – bu bepul!