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.

Mga Preset
Mga control point
Unang control point
Pangalawang control point
Preview
iyong curve
linear
Value
cubic-bezier(0.25, 0.1, 0.25, 1)
I-drag ang handle o pumili ng preset para hubugin ang curve.

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.

Isinulat at sinuri ng editorial team ng BroBroGo.Huling na-update:

Ang CSS Cubic Bezier Generator ay isang visual na tool na nagbibigay-daan sa paglikha ng mga custom na easing curve para sa mga CSS transition at animation. Sa pamamagitan ng pag-drag sa dalawang control point, direktang nababago ang hugis ng curve upang makabuo ng natatanging bilis at daloy ng galaw. Habang isinasaayos ang curve, may isang dot na gumagalaw kasabay nito upang ipakita ang easing effect, katabi ng isa pang dot na gumagalaw sa parehong bilis o steady na takbo. Pagkatapos nito, ibinibigay ng tool ang katumbas na cubic-bezier() value na handang kopyahin para sa iyong stylesheet.

Ang Matematika at Estruktura ng Cubic Bezier sa CSS

Ang cubic Bezier curve ay ginagamit sa CSS upang tukuyin ang takbo ng bilis ng isang transition o animation sa paglipas ng oras. Ang curve na ito ay tumatakbo mula sa ibaba-kaliwa (na kumakatawan sa simula ng animation) patungo sa itaas-kanan (na kumakatawan sa dulo). Sa sistemang ito, ang oras ay dumarami mula kaliwa pakanan, samantalang ang progreso ng animation ay tumataas mula ibaba pataas.

Ang hugis ng curve ay pinamamahalaan ng apat na coordinate na bumubuo sa dalawang control point: cubic-bezier(x1, y1, x2, y2). Ang mga control point na ito ang humihila sa linya upang magkaroon ito ng kurba. May mga mahigpit na panuntunan ang CSS sa mga value na maaaring tanggapin ng mga coordinate na ito:

  • X Values (x1, x2): Ang mga value para sa pahalang na aksis (time) ay limitado lamang sa pagitan ng 0 at 1. Hindi maaaring lumampas sa sakop na ito ang takbo ng oras.
  • Y Values (y1, y2): Ang mga value para sa patayong aksis (progreso) ay may mas malawak na sakop mula -0.70 hanggang 1.70. Ang paglampas sa 1.0 o pagbaba sa 0.0 ay nagbibigay-daan sa mga espesyal na epekto sa galaw.

Pag-uugali ng Interface at mga Panuntunan sa Input

Ang generator ay may mga built-in na panuntunan upang matiyak na palaging wasto ang makukuhang CSS code. Narito ang mga mekanismo ng input at ang mga kaukulang tugon ng tool:

  • Direktang Pag-drag: Maaaring i-drag ang dalawang handle upang baguhin ang hugis ng "iyong curve".
  • Keyboard Navigation: Kung nakapokus ang cursor sa isang control point handle, ang pagpindot sa Left arrow key ay magpapababa sa value nito (halimbawa, magiging 0.99).
  • Awtomatikong Pagwawasto: Kung magpapasok ng value na labas sa limitasyon—tulip ng paglalagay ng 9 para sa "Unang control point"—ang value ay awtomatikong babalik sa 1 sa sandaling mawala ang pokus (lose focus) sa input field.
  • Pagpapanatili ng Datos: Kung buburahin ang laman ng isang numerical input field at mawawalan ito ng pokus, ibabalik ng tool ang huling wastong value na nakatala rito. Ang mga walang laman o hindi numerong input ay pansamantalang hihinto at maghihintay ng kumpletong value.
  • Pagkopya ng Value: Kapag matagumpay na nakopya ang nabuong cubic-bezier() value, ipapakita ng interface ang status na "Copied". Walang hiwalay na mensahe para sa pagkabigo dahil ang tool ay palaging nagpapanatili ng wastong estado.

Paglikha ng Epekto ng Overshoot at Pull-Back

Ang isa sa pinakamahalagang gamit ng pag-adjust sa Y values lampas sa karaniwang 0 hanggang 1 ay ang paglikha ng mga epektong "anticipation" (pull-back) at "overshoot".

Kapag ang Y value ng unang control point ay naging negatibo (mababa sa 0), ang animation ay bahagyang babalik sa likod muna bago sumulong nang mabilis. Ito ang tinatawag na pull-back o anticipation. Sa kabilang banda, kapag ang Y value ng pangalawang control point ay lumampas sa 1.0 (hanggang 1.70), ang elemento ay lalampas muna sa kanyang huling posisyon bago dahan-dahang babalik upang huminto. Ito ang tinatawag na overshoot.

Ang preset na "Back Out" ay isang magandang halimbawa nito. Ang preset na ito ay nagtatakda ng value na cubic-bezier(0.34, 1.56, 0.64, 1), kung saan ang Y value na 1.56 ay lumilikha ng malinaw na overshoot bago matapos ang transition.

Mga Limitasyon ng Isang Cubic Bezier Curve

Bagaman napakahusay ng cubic-bezier() para sa pagkontrol ng bilis, mayroon itong limitasyon sa matematika pagdating sa mga kumplikadong animation. Ang isang solong cubic-bezier function ay maaari lamang mag-anticipate (pull-back) at mag-overshoot nang isang beses bago ito tuluyang huminto sa dulo.

Ibig sabihin, hindi nito kayang magpahayag ng mga epektong pabalik-balik o nagbabago ng direksyon nang maraming beses, tulad ng talbog (bounce) o elastic na epekto. Ang mga ganoong uri ng galaw ay nangangailangan ng mas maraming keyframe sa CSS o paggamit ng iba pang pamamaraan.

Pagpapatupad sa CSS

Ang nakopyang value mula sa generator ay ginagamit sa pamamagitan ng paglalapat nito sa mga kaukulang CSS property. Karaniwan itong inilalagay sa:

  • transition-timing-function
  • animation-timing-function

Maaari rin itong isama sa mga shorthand property tulad ng transition o animation. Halimbawa:

.box {
  transition-property: transform;
  transition-duration: 0.3s;
  transition-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1);
}

Seguridad at Pagpoproseso ng Datos

Ang lahat ng pagguhit ng curve, pag-preview ng galaw ng dot, at kalkulasyon ng mga coordinate ay nagaganap nang lokal sa iyong web browser. Walang anumang data o coordinate na iyong inilalagay o isinasaayos sa tool ang ina-upload sa BroBroGo.

Mga Madalas Itanong (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.

Gradient GeneratorBumuo ng linear, radial, o conic na gradient, magdagdag ng mga color stop at i-set ang direksyon, pagkatapos ay kopyahin ang CSS sa isang click lang.Border Radius GeneratorBilugin ang bawat sulok gamit ang mga slider, humubog ng mga organic blob gamit ang elliptical mode, at kopyahin ang CSS agad-agad.Flexbox GeneratorMag-set up ng flex container at ng mga item nito gamit ang mga visual na kontrol, panoorin ang reaksyon ng layout nang live, at kopyahin ang CSS sa isang click lang.CSS Grid GeneratorI-set ang iyong mga column at row, i-drag sa mga cell para maglagay ng mga item, at kopyahin ang grid CSS kasama ang katugmang HTML sa isang click lang.Box Shadow GeneratorI-drag ang mga slider para humubog ng box-shadow, magpatong ng mga layer para sa lalim, at kopyahin ang natapos na CSS agad-agad.CSS clamp() CalculatorMaglagay ng sukat para sa maliliit at malalaking screen at kumuha ng fluid na clamp() value na maayos na nag-i-scale sa pagitan — para sa mga sukat ng font, padding, margin o gap.