Paano ako lilikha ng isang custom na cubic-bezier easing curve para sa CSS?

I-drag ang dalawang handle ng control point sa graph, i-type ang eksaktong mga halaga ng x1, y1, x2, y2, o pumili ng preset. Pagkatapos ay piliin ang CSS sa ilalim ng Format ng output at i-click ang Kopyahin upang makuha ang cubic-bezier() na halaga para sa transition-timing-function.

Paano ako gagawa ng bounce o overshoot effect gamit ang cubic-bezier?

I-drag ang isang handle sa itaas o ibaba ng kahon upang ang halaga ng Y nito ay lumampas sa 0-1. Maaaring lumampas ang Y sa saklaw na iyon, habang ang X ay nananatili sa pagitan ng 0 at 1. Ang mga preset na back-out at anticipate ay mga handa nang panimulang punto ng overshoot.

Maaari ko bang makuha ang easing para sa Tailwind, Framer Motion o anime.js?

Oo. Ang mga tab ng format ng output ay CSS, Tailwind, Framer Motion at anime.js. Lahat sila ay nagfo-format ng parehong apat na numero, kaya pumili ng tab at i-click ang Kopyahin upang ilagay ang snippet sa iyong clipboard.

Paano ko ilo-load ang isang umiiral na cubic-bezier na halaga upang i-edit ito?

I-paste ang isang halaga tulad ng cubic-bezier(.17, .67, .83, .67) sa kahon ng pag-import at i-click ang I-load. Kung hindi mabasa ang apat na numero, makakakuha ka ng mensahe ng error. Ang curve ay naka-imbak din sa URL ng pahina pagkatapos ng hash, kaya maaari itong ibahagi.

Bakit parang mas mabagal ang preview kaysa sa aking mga tunay na transition?

Ang Preview ng galaw ay gumagamit ng setting na Tagal na maaari mong baguhin, at ang mga default ay mas mabagal upang mapag-aralan mo ang curve. Paikliin ang Tagal, pagkatapos ay gamitin ang Replay upang makita ang galaw sa bilis na plano mong ilabas.

Oo. Libre ang bawat tool, walang account at walang credit card. Ang trabaho ay tumatakbo sa iyong device sa halip na sa aming mga server, kaya ito nananatiling libre.

Gumagana ba ito sa mobile?

Oo. Gumagana ito sa mga kasalukuyang mobile browser sa iOS at Android, nang walang ini-install.

📈

Libreng Gumagawa ng CSS Cubic-Bezier Easing

Idisenyo ang mga CSS easing curve sa pamamagitan ng pag-drag ng mga control point, i-preview ang kilos nang live, at kopyahin ang cubic-bezier() na value. Kasama ang mga overshoot/bounce preset.

Tumatakbo sa iyong browserWalang pag-sign up, walang pop-upHindi kailangan ng loginLibre magpakailanman

Gumagana offline kapag na-load na

I-drag ang mga handle na teal at rose para ayusin ang kurba

Mga Control Point

x1y1x2y2

Preview ng galaw

Tagal1.6s

Transition ng lapad

CSS na halaga

transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);

Mga preset

Maaaring mag-pull pataas o pababa ng kahon ang mga rose at teal na handle (Y na lampas sa 0-1) para lumikha ng mga epekto ng 'overshoot' / bounce tulad ng back-out at anticipate. Nananatili ang X sa loob ng 0-1 (hindi maaaring mag-reverse ang oras).

Mga karaniwang gamit

Custom na CSS Transition EasingMagdisenyo ng natural na pakiramdam na easing para sa hover effects, menus, at UI transitions.
Bounce at Overshoot AnimationsLumikha ng masayang spring/bounce motion sa pamamagitan ng paghila ng control points sa lampas sa kahon.
Easing para sa @keyframes AnimationsPumili ng tamang animation-timing-function para sa CSS keyframe animations.
Easing Values para sa JS Animation LibrariesMakakuha ng cubic-bezier values para sa GSAP, Framer Motion, anime.js, at marami pang iba.
Maintindihan ang Paano Gumagana ang EasingMakita ang relasyon sa pagitan ng isang bezier curve at ang kilusan na ito ay gumagawa.

Paano ito Gumagana

Buong ginawa sa browser ang editor gamit ang React state at SVG — walang library na humahawak sa curve math. Tinutukoy ng dalawang nadadrag na control point ang isang SVG cubic Bezier path, at pinapatakbo ng sariling CSS animation engine ng browser ang motion preview sa pagsisingit ng resultang cubic-bezier() value direkta sa isang @keyframes rule.

1
I-drag o i-type ang mga control point
Nakapatong ang dalawang handle (P1 na teal, P2 na rose) sa isang SVG canvas. Gumagamit ang pag-drag ng Pointer Events API na may setPointerCapture kaya sinusundan ng handle ang daliri o cursor mo kahit nasa labas ng hangganan ng SVG. Puwede mo ring galawin ang mga handle gamit ang arrow key o i-type ang eksaktong halaga sa mga x1/y1/x2/y2 na number input.
2
Iginuguhit ng SVG ang curve nang real time
Ang curve ay iisang SVG <path> element na ang C (cubic Bezier) command ay kinakalkula ulit mula sa apat na coordinate ng control point sa bawat state update. Walang canvas, walang panlabas na library — direktang iginuguhit ng SVG renderer ng browser ang path.
3
Pini-preview ng CSS engine ng browser ang easing
Tatlong live na animation (dumudulas na tuldok, width transition, at scale) ang nagpapatakbo ng CSS @keyframes na may inline na isiningit na cubic-bezier() value. Ang sariling animation engine ng browser ang nagbibigay-kahulugan sa curve, kaya ang nakikita mo ay eksaktong gagawin ng production CSS mo.
4
Kopyahin ang snippet sa syntax ng framework mo
Fino-format ng mga tab ang parehong apat na numero bilang CSS transition-timing-function, Tailwind arbitrary-value class, Framer Motion ease array, o anime.js easing string. Isinusulat ang snippet sa clipboard gamit ang navigator.clipboard. Ine-encode din ang curve sa URL hash (#b=x1,y1,x2,y2) kaya puwede mo itong ibahagi o i-bookmark.