Gjenerator i CSS Cubic Bezier
Tërhiqni dy dorezat për të formësuar një kurbë zbutjeje, shikoni një pikë duke lëvizur përgjatë saj kundrejt një lëvizjeje të qëndrueshme dhe kopjoni vlerën cubic-bezier().
cubic-bezier(0.25, 0.1, 0.25, 1)Kurba vizatohet drejtpërdrejt në shfletuesin tuaj. Asgjë që vendosni këtu nuk ngarkohet në BroBroGo.
Pyetje të shpeshta
Çfarë nënkuptojnë dy dorezat dhe katër numrat?
Kurba shkon nga majtas-poshtë (fillimi) në djathtas-lart (fundi), me kohën që shkon nga e majta në të djathtë dhe progresin që shkon lart. Dy dorezat janë pikat e kontrollit që e përkulin atë — secila ka një X dhe një Y, kështu që së bashku ato janë cubic-bezier(x1, y1, x2, y2). X qëndron midis 0 dhe 1, ndërsa Y mund të shkojë mbi pjesën e sipërme ose nën pjesën e poshtme për ta bërë lëvizjen të tejkalojë ose të tërhiqet përpara se të stabilizohet.
Si ta përdor vlerën në CSS-në time?
Kopjoni cubic-bezier() dhe vendoseni kudo ku shkon një funksion kohor — transition-timing-function, animation-timing-function, ose shkurtimi, p.sh. transition: transform 0.3s cubic-bezier(0.25, 0.1, 0.25, 1). Fjalët kyçe ease, ease-in, ease-out dhe ease-in-out janë thjesht kurba fikse cubic-bezier, kështu që zgjedhja e një prej atyre parazgjedhjeve ju tregon vlerën e saktë pas fjalës kyçe.
A mund të krijojë një efekt kërcimi (bounce) ose elastik?
Jo vetëm me të. Një cubic-bezier i vetëm mund të parashikojë dhe të tejkalojë — parazgjedhjet "back" tërheqin një dorezë përtej kutisë për të bërë pikërisht këtë — por ai mund të lëvizë vetëm në një drejtim dhe pastaj të stabilizohet. Efektet bounce (kërcim) dhe elastic ndryshojnë drejtimin disa herë, gjë që asnjë cubic-bezier i vetëm nuk mund ta shprehë; ato kërkojnë keyframes në CSS ose funksionin linear() me shumë ndalesa.