Hvordan lager jeg en tilpasset kubisk-Bézier-easingkurve for CSS?

Dra de to kontrollpunkthåndtakene på grafen, skriv inn eksakte x1-, y1-, x2-, y2-verdier, eller velg en forhåndsinnstilling. Velg deretter CSS under Utdataformat og klikk Kopier for å få cubic-bezier()-verdien for transition-timing-function.

Hvordan lager jeg en sprett- eller oversvingeffekt med cubic-bezier?

Dra et håndtak over eller under boksen slik at Y-verdien går forbi 0–1. Y kan overskride dette området, mens X holder seg mellom 0 og 1. Forhåndsinnstillingene back-out og anticipate er ferdige utgangspunkt for overskyting.

Kan jeg få easing for Tailwind, Framer Motion eller anime.js?

Ja. Fanene for utdataformat er CSS, Tailwind, Framer Motion og anime.js. De formaterer alle de samme fire tallene, så velg en fane og klikk Kopier for å legge utdraget på utklippstavlen.

Hvordan laster jeg inn en eksisterende cubic-bezier-verdi for å redigere den?

Lim inn en verdi som cubic-bezier(.17, .67, .83, .67) i importboksen og klikk Last inn. Hvis fire tall ikke kan leses, får du en feilmelding. Kurven lagres også i sidens URL etter hash-tegnet, slik at den kan deles.

Hvorfor føles forhåndsvisningen tregere enn de virkelige overgangene mine?

Bevegelsesforhåndsvisningen bruker en Varighet-innstilling du kan endre, og standardverdiene er tregere slik at du kan studere kurven. Forkort Varighet, og bruk deretter Spill av på nytt for å se bevegelsen i hastigheten du planlegger å sende ut.

Er det virkelig gratis?

Ja. Alle verktøy er gratis å bruke, uten konto og uten kredittkort. Arbeidet utføres på enheten din i stedet for på våre servere, noe som gjør det gratis å kjøre.

Fungerer det på mobil?

Ja. Det fungerer i moderne mobilnettlesere på iOS og Android, uten at du trenger å installere noe.

📈

Gratis CSS kubisk-Bézier-easing-generator

Design CSS-easing-kurver ved å dra kontrollpunkter, forhåndsvis bevegelsen live og kopier cubic-bezier()-verdien. Inkluderer overshoot/sprett-forhåndsinnstillinger.

Kjører i nettleserenIngen registrering, ingen popup-vinduerIngen pålogging krevesGratis for alltid

Fungerer uten nett når den er lastet

Dra i teal- og rosa-håndtakene for å forme kurven

Kontrollpunkter

x1y1x2y2

Bevegelsesforhåndsvisning

Varighet1,6s

Breddeovergang

CSS-verdi

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

Forhåndsinnstillinger

De rosa og teal-håndtakene kan trekkes over eller under boksen (Y utenfor 0–1) for å skape overskyting-/spretteffekter som back-out og anticipate. X forblir innenfor 0–1 (tid kan ikke gå bakover).

Vanlige bruksområder

Egendefinert CSS-overgangsgangDesign naturlig følelse av letthetseffekter for hover, menyer og brukerflateoverganger.
Studs og overshotsanimasjonerLag munter fjær/sprungbevegelse ved å trekke kontrollpunkter forbi boksen.
Letthetsverdi for @keyframes-animasjonerVelg riktig animation-timing-funksjon for CSS-keyframe-animasjoner.
Letthetsverdi for JS-animasjonbibliotekerFå cubic-bezier-verdier for GSAP, Framer Motion, anime.js og mer.
Forstå hvordan letthet fungererSe forholdet mellom en bezier-kurve og bevegelsen den produserer.

Hvordan det fungerer

Editoren er bygget helt i nettleseren med React-state og SVG — intet bibliotek håndterer kurvematematikken. To kontrollpunkter du kan dra, definerer en kubisk Bézier-bane i SVG, og nettleserens egen CSS-animasjonsmotor kjører bevegelsesforhåndsvisningen ved å sette den resulterende cubic-bezier()-verdien direkte inn i en @keyframes-regel.

1
Dra eller skriv inn kontrollpunkter
To håndtak (P1 i blågrønt, P2 i rosa) ligger på et SVG-lerret. Draging bruker Pointer Events API med setPointerCapture, så håndtaket følger fingeren eller markøren også utenfor SVG-grensen. Du kan også flytte håndtakene med piltastene eller skrive eksakte verdier i tallfeltene x1/y1/x2/y2.
2
SVG tegner kurven i sanntid
Kurven er ett enkelt SVG <path>-element der C-kommandoen (kubisk Bézier) beregnes på nytt fra de fire kontrollpunktkoordinatene ved hver tilstandsendring. Ingen canvas, intet eksternt bibliotek — nettleserens SVG-gjengiver tegner banen direkte.
3
Nettleserens CSS-motor forhåndsviser easingen
Tre live-animasjoner (en glidende prikk, en breddeovergang og en skalering) kjører CSS @keyframes med cubic-bezier()-verdien satt inn inline. Nettleserens egen animasjonsmotor tolker kurven, så det du ser er nøyaktig det CSS-en din i produksjon vil gi.
4
Kopier utdraget i rammeverkets syntaks
Faner formaterer de samme fire tallene som en CSS transition-timing-function, en Tailwind-klasse med vilkårlig verdi, en Framer Motion ease-matrise eller en anime.js easing-streng. Utdraget skrives til utklippstavlen med navigator.clipboard. Kurven kodes også i URL-hashen (#b=x1,y1,x2,y2), så du kan dele eller bokmerke den.