Kako ustvarim krivuljo easing po meri za CSS cubic-bezier?

Povlecite ročici kontrolnih točk na grafu, vnesite natančne vrednosti x1, y1, x2, y2 ali izberite prednastavitev. Nato v Izhodni format izberite CSS in kliknite Kopiraj, da dobite vrednost cubic-bezier() za transition-timing-function.

Kako naredim učinek odboja ali prekoračitve s cubic-bezier?

Povlecite ročico nad ali pod polje, tako da njena vrednost Y preseže 0–1. Y lahko preseže to območje, medtem ko X ostane med 0 in 1. Prednastavitvi back-out in anticipate sta pripravljeni izhodišči za prekoračitev.

Ali lahko dobim easing za Tailwind, Framer Motion ali anime.js?

Da. Zavihki izhodnega formata so CSS, Tailwind, Framer Motion in anime.js. Vsi oblikujejo iste štiri številke, zato izberite zavihek in kliknite Kopiraj, da izsek postavite v odložišče.

Kako naložim obstoječo vrednost cubic-bezier, da jo uredim?

Prilepite vrednost, kot je cubic-bezier(.17, .67, .83, .67), v polje za uvoz in kliknite Naloži. Če štirih številk ni mogoče prebrati, se prikaže sporočilo o napaki. Krivulja je shranjena tudi v URL-ju strani za lojtro, tako da jo je mogoče deliti.

Zakaj se zdi predogled počasnejši od mojih resničnih prehodov?

Predogled gibanja uporablja nastavitev Trajanje, ki jo lahko spremenite, privzete vrednosti pa so počasnejše, da lahko preučite krivuljo. Skrajšajte Trajanje, nato uporabite Ponovno predvajanje, da vidite gibanje s hitrostjo, s katero ga nameravate objaviti.

Ali je res brezplačno?

Da. Vsako orodje je brezplačno za uporabo, brez računa in kreditne kartice. Delo poteka na vaši napravi in ne na naših strežnikih, kar omogoča brezplačno delovanje.

Ali deluje na mobilniku?

Da. Deluje v sodobnih mobilnih brskalnikih na iOS in Androidu, brez namestitve.

📈

Generator krivulje CSS Cubic-Bezier — brezplačno

Oblikujte krivulje pospeška CSS z vlečenjem kontrolnih točk, predoglejte gibanje v živo in kopirajte vrednost cubic-bezier(). Vključuje prednastavitve preskoka/odboja.

Deluje v vašem brskalnikuBrez registracije, brez pojavnih okenPrijava ni potrebnaBrezplačno za vedno

Deluje brez povezave po nalaganju

Povlecite modrozelene in rožnate ročice za oblikovanje krivulje

Kontrolne točke

x1y1x2y2

Predogled gibanja

Trajanje1,6 s

Prehod širine

CSS vrednost

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

Prednastavitve

Rožnate in modrozelene ročice lahko potegnete nad ali pod okvir (Y zunaj 0–1) za učinke preseganja/odskoka kot back-out in anticipate. X ostane v območju 0–1 (čas se ne more obrniti).

Pogosta področja uporabe

Prilagojeno blaženje prehoda CSSOblikujte naravno počutje blaženja za učinke lebdenja, menije in prehode UI.
Animacije skokov in preskokovUstvarite veselo gibanje vzmeti/skoka tako, da vlečete kontrolne točke izven polja.
Blaženje za animacije @keyframesIzberite pravo funkcijo časovanja animacije za animacije CSS keyframe.
Vrednosti blaženja za knjižnice animacij JSPridobite kubične vrednosti Bezierja za GSAP, Framer Motion, anime.js in drugo.
Razumeti, kako blaženje delujeOgledajte si razmerje med Bezierovo krivuljo in gibanjem, ki ga proizvaja.

Kako deluje

Urejevalnik je zgrajen v celoti v brskalniku z uporabo stanja React in SVG — nobena knjižnica ne obravnava matematike krivulje. Dve vlečljivi kontrolni točki definirata SVG kubično Bezierjevo pot, lasten CSS animacijski pogon brskalnika pa izvaja predogled gibanja z vstavljanjem nastale vrednosti cubic-bezier() neposredno v pravilo @keyframes.

1
Povlecite ali vtipkajte kontrolne točke
Dve ročici (P1 v tirkizni, P2 v roza) sedita na platnu SVG. Vlečenje uporablja Pointer Events API z setPointerCapture, tako da ročica sledi vašemu prstu ali kazalcu tudi zunaj meje SVG. Ročice lahko premikate tudi s smernimi tipkami ali vtipkate natančne vrednosti v številčne vnose x1/y1/x2/y2.
2
SVG riše krivuljo v realnem času
Krivulja je en sam element SVG <path>, katerega ukaz C (kubična Bezierjeva) se ob vsaki posodobitvi stanja preračuna iz štirih koordinat kontrolnih točk. Brez platna, brez zunanje knjižnice — izris SVG v brskalniku neposredno nariše pot.
3
CSS pogon brskalnika predogleda glajenje
Tri žive animacije (drseča pika, prehod širine in merilo) izvajajo CSS @keyframes z vrednostjo cubic-bezier(), vstavljeno vrstico. Lasten animacijski pogon brskalnika razlaga krivuljo, tako da je tisto, kar vidite, natanko tisto, kar bo ustvaril vaš produkcijski CSS.
4
Kopirajte odlomek v skladnji svojega ogrodja
Zavihki oblikujejo ista štiri števila kot CSS transition-timing-function, razred Tailwind s poljubno vrednostjo, polje glajenja Framer Motion ali niz glajenja anime.js. Odlomek se zapiše v odložišče z navigator.clipboard. Krivulja je prav tako kodirana v hashu URL (#b=x1,y1,x2,y2), tako da jo lahko delite ali dodate med zaznamke.