Hoe skep ek 'n pasgemaakte cubic-bezier-verligtingskurwe vir CSS?

Sleep die twee kontrolepunt-handvatsels op die grafiek, tik presiese x1-, y1-, x2-, y2-waardes in, of kies 'n voorinstelling. Kies dan CSS onder Uitvoerformaat en klik Kopieer om die cubic-bezier()-waarde vir transition-timing-function te kry.

Hoe maak ek 'n bons- of oorskiet-effek met cubic-bezier?

Sleep 'n handvatsel bo of onder die blokkie sodat sy Y-waarde verby 0-1 gaan. Y kan daardie reeks oorskry, terwyl X tussen 0 en 1 bly. Die back-out- en anticipate-voorinstellings is klaargemaakte oorskiet-beginpunte.

Kan ek die verligting vir Tailwind, Framer Motion of anime.js kry?

Ja. Die uitvoerformaat-oortjies is CSS, Tailwind, Framer Motion en anime.js. Hulle formateer almal dieselfde vier nommers, so kies 'n oortjie en klik Kopieer om die brokkie op jou knipbord te plaas.

Hoe laai ek 'n bestaande cubic-bezier-waarde om dit te redigeer?

Plak 'n waarde soos cubic-bezier(.17, .67, .83, .67) in die invoerblokkie en klik Laad. As vier nommers nie gelees kan word nie, kry jy 'n foutboodskap. Die kurwe word ook in die bladsy-URL na die hutsmerker gestoor, sodat dit gedeel kan word.

Hoekom voel die voorskou stadiger as my werklike oorgange?

Die Bewegingsvoorskou gebruik 'n Tydsduur-instelling wat jy kan verander, en verstekwaardes is stadiger sodat jy die kurwe kan bestudeer. Verkort die Tydsduur, gebruik dan Herhaal om die beweging te sien teen die spoed wat jy beplan om te gebruik.

Is dit regtig gratis?

Ja. Elke instrument is gratis om te gebruik, sonder 'n rekening en sonder 'n kredietkaart. Die werk loop op jou toestel eerder as op ons bedieners, en dit is wat dit gratis hou om te loop.

Ja. Dit werk in huidige mobiele blaaiers op iOS en Android, sonder om iets te installeer.

📈

Gratis CSS Cubic-Bezier-verligtingsgenerator

Ontwerp CSS verligting van kurwes deur beheerpunte te sleep, voorbeskou die beweging regstreeks en kopieer die cubic-bezier() waarde. Sluit voorinstellings oor oorskiet/weiering in.

Loop in jou blaaierGeen aanmelding, geen opspringers nieGeen aanmelding benodigGratis vir altyd

Werk vanlyn sodra gelaai

Sleep die teel- en rooshandvatsels om die kurwe te vorm

Kontrolepunte

x1y1x2y2

Bewegingsvoorskou

Tydsduur1,6 s.

Breedte-oorgang

CSS-waarde

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

Voorkeure

Die roos- en teelhandvatsels kan bo of onder die boks trek (Y buite 0–1) om 'oorskiet'- / stuiteffekte soos back-out en anticipate te skep. X bly binne 0–1 (tyd kan nie omdraai nie).

Algemene gebruike

Pasgemaakte CSS-oorgangsverligtingOntwerp natuurlik-voelende verligting vir sweweefekte, menu's en UI-oorgange.
Stuit en oorskiet-animasiesSkep speelse veerbeweging deur beheeruitsluitings buite die boks te trek.
Verligting vir @keyframes-animasiesKies die regte animasietiming-funksie vir CSS-sleutelfraasanimassies.
Verligtingswaarde vir JS-animasiebibliotekeKry kubieke-bezierwaarde vir GSAP, Framer Motion, anime.js en meer.
Verstaan hoe verligting werkSien die verhouding tussen 'n bezier-kurwe en die beweging wat dit produseer.

Hoe dit werk

Die redigeerder is heeltemal in die blaaier gebou met React-toestand en SVG — geen biblioteek hanteer die kurwewiskunde nie. Twee sleepbare beheerpunte definieer 'n SVG-kubieke-Bezier-pad, en die blaaier se eie CSS-animasie-enjin loop die bewegingsvoorskou deur die resulterende cubic-bezier()-waarde direk in 'n @keyframes-reël in te spuit.

1
Sleep of tik beheerpunte
Twee handvatsels (P1 in teal, P2 in roos) sit op 'n SVG-canvas. Sleep gebruik die Pointer Events-API met setPointerCapture sodat die handvatsel jou vinger of wyser volg, selfs buite die SVG-grens. Jy kan handvatsels ook met pyltjiesleutels stoot of presiese waardes in die x1/y1/x2/y2-getaltoevoere tik.
2
SVG teken die kurwe intyds
Die kurwe is 'n enkele SVG-<path>-element wie se C- (kubieke Bezier-) opdrag met elke toestandbywerking van die vier beheerpunt-koördinate herbereken word. Geen canvas, geen eksterne biblioteek nie — die blaaier se SVG-renderer teken die pad direk.
3
Blaaier se CSS-enjin bekyk die gladstryking vooraf
Drie lewendige animasies ('n gliedende kolletjie, 'n wydte-oorgang, en 'n skaal) loop CSS @keyframes met die cubic-bezier()-waarde inlyn ingespuit. Die blaaier se eie animasie-enjin interpreteer die kurwe, dus is wat jy sien presies wat jou produksie-CSS sal produseer.
4
Kopieer die snit in jou raamwerk se sintaksis
Oortjies formateer dieselfde vier getalle as 'n CSS transition-timing-function, 'n Tailwind-arbitrêre-waarde-klas, 'n Framer Motion-gladstrykingsreeks, of 'n anime.js-gladstrykingstring. Die snit word na die knipbord geskryf met navigator.clipboard. Die kurwe word ook in die URL-hash geënkodeer (#b=x1,y1,x2,y2) sodat jy dit kan deel of boekmerk.