cubic-bezier()
CSS cubic-bezier() funksiyasi kubik Bezye egri chizig‘ini (Cubic Bezier) belgilaydi.
Kubik Bezye egri chizig‘i to‘rtta nuqta bilan aniqlanadi: P0, P1, P2 va P3.
P0 va P3 — egri chiziqning boshi va oxiri. CSS’da bu nuqtalar qat’iy belgilangan, chunki koordinatalar nisbatlardan iborat. P0 — (0, 0) bo‘lib, boshlang‘ich vaqt va boshlang‘ich holatni bildiradi; P3 — (1, 1) bo‘lib, yakuniy vaqt va yakuniy holatni bildiradi.
cubic-bezier() funksiyasidan animation-timing-function xususiyati va transition-timing-function xususiyati bilan foydalanish mumkin.
Misol
Boshidan oxirigacha o‘zgaruvchan tezlikka ega o‘tish (transition) effekti:
div {
width: 100px;
height: 100px;
background: red;
transition: width 2s;
transition-timing-function: cubic-bezier(0.1, 0.7, 1.0, 0.1);
}
O‘zingiz sinab ko‘ring »
Quyida ko‘proq "O‘zingiz sinab ko‘ring" misollari keltirilgan.
Brauzerlarda qo‘llab-quvvatlash
Jadvaldagi sonlar funksiyani to‘liq qo‘llab-quvvatlaydigan birinchi brauzer versiyasini ko‘rsatadi.
| Funksiya | |||||
|---|---|---|---|---|---|
| cubic-bezier() | 4.0 | 10.0 | 4.0 | 3.1 | 10.5 |
CSS sintaksisi
cubic-bezier(x1,y1,x2,y2)
| Qiymat | Tavsif |
|---|---|
| x1,y1,x2,y2 | Majburiy. Sonli qiymatlar. x1 va x2 0 dan 1 gacha bo‘lgan son bo‘lishi kerak |
| Versiya: | CSS3 |
|---|
Ko‘proq misollar
Misol
Turli kubik Bezye tezlik qiymatlariga ega <div> elementlarini ko‘rsating:
#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 ma’lumotnomasi: CSS animation-timing-function xususiyati.
CSS ma’lumotnomasi: CSS transition-timing-function xususiyati.
W3Schools Pathfinder
Yutuqlaringizni kuzating – bu bepul!