CSS Cubic Bezier Generator
I-drag ang dalawang handle para hubugin ang easing curve, panoorin ang paggalaw ng dot kumpara sa steady na dot, at kopyahin ang cubic-bezier() value.
cubic-bezier(0.25, 0.1, 0.25, 1)Ang curve ay iginuguhit mismo sa iyong browser. Walang anuman sa mga inilalagay mo rito ang ina-upload sa BroBroGo.
FAQ
Ano ang ibig sabihin ng dalawang handle at apat na numero?
Ang curve ay tumatakbo mula sa ibaba-kaliwa (ang simula) patungo sa itaas-kanan (ang dulo), habang ang oras ay tumatakbo mula kaliwa pakanan at ang progreso ay pataas. Ang dalawang handle ay ang mga control point na nagpapaliko rito — ang bawat isa ay may X at Y, kaya magkasama silang nagiging cubic-bezier(x1, y1, x2, y2). Ang X ay nananatili sa pagitan ng 0 at 1, habang ang Y ay maaaring lumampas sa itaas o bumaba sa ibaba upang magkaroon ng overshoot o pull back ang galaw bago ito huminto.
Paano ko gagamitin ang value sa aking CSS?
Kopyahin ang cubic-bezier() at ilagay ito kahit saan inilalagay ang timing function — transition-timing-function, animation-timing-function, o ang shorthand, hal. transition: transform 0.3s cubic-bezier(0.25, 0.1, 0.25, 1). Ang mga keyword na ease, ease-in, ease-out at ease-in-out ay mga fixed cubic-bezier curve lamang, kaya ang pagpili sa isa sa mga preset na iyon ay magpapakita sa iyo ng eksaktong value sa likod ng keyword.
Maaari ba itong gumawa ng bounce o elastic na epekto?
Hindi sa sarili nito lamang. Ang isang cubic-bezier ay maaaring mag-anticipate at mag-overshoot — ang mga "back" preset ay humihila sa isang handle lampas sa box para gawin iyon — ngunit maaari lamang itong gumalaw sa isang direksyon at pagkatapos ay huminto. Ang bounce at elastic ay nagbabago ng direksyon nang ilang beses, na hindi maipapahayag ng isang cubic-bezier; kailangan ng mga iyon ng CSS keyframes o ng linear() function na may maraming stop.