Hur skapar jag en anpassad kubisk bezier-rörelsekurva för CSS?

Dra de två kontrollpunktshandtagen på grafen, skriv exakta x1-, y1-, x2-, y2-värden eller välj en förinställning. Välj sedan CSS under Utmatningsformat och klicka på Kopiera för att få cubic-bezier()-värdet för transition-timing-function.

Hur gör jag en studs- eller överslängseffekt med cubic-bezier?

Dra ett handtag ovanför eller under rutan så att dess Y-värde går utanför 0–1. Y kan överskrida det intervallet, medan X stannar mellan 0 och 1. Förinställningarna back-out och anticipate är färdiga startpunkter för översläng.

Kan jag få rörelsekurvan för Tailwind, Framer Motion eller anime.js?

Ja. Flikarna för utmatningsformat är CSS, Tailwind, Framer Motion och anime.js. De formaterar alla samma fyra nummer, så välj en flik och klicka på Kopiera för att lägga kodsnutten i urklipp.

Hur laddar jag ett befintligt cubic-bezier-värde för att redigera det?

Klistra in ett värde som cubic-bezier(.17, .67, .83, .67) i importrutan och klicka på Ladda. Om fyra nummer inte kan läsas får du ett felmeddelande. Kurvan lagras också i sidans URL efter hash-tecknet, så den kan delas.

Varför känns förhandsvisningen långsammare än mina riktiga övergångar?

Rörelseförhandsvisningen använder en Varaktighet-inställning du kan ändra, och standardvärdena är långsammare så att du kan studera kurvan. Förkorta Varaktighet och använd sedan Spela upp igen för att se rörelsen i den hastighet du planerar att använda.

Är det verkligen gratis?

Ja. Alla verktyg är gratis att använda, utan konto och utan kreditkort. Arbetet utförs på din enhet istället för på våra servrar, vilket är det som gör det gratis att köra.

Fungerar det på mobil?

Ja. Det fungerar i moderna mobilwebbläsare på iOS och Android, utan installation.

📈

Gratis CSS cubic-bezier-generator för rörelsekurvor

Designa CSS-rörelsekurvor genom att dra kontrollpunkter, förhandsgranska rörelsen live och kopiera cubic-bezier()-värdet. Inkluderar överskjutnings-/studsförinställningar.

Körs i din webbläsareIngen registrering, inga popup-fönsterIngen inloggning krävsGratis för alltid

Fungerar offline när den väl lästs in

Dra i de turkosa och rosa handtagen för att forma kurvan

Kontrollpunkter

x1y1x2y2

Rörelseförhandsvisning

Varaktighet1,6s

Breddövergång

CSS-värde

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

Förval

De rosa och turkosa handtagen kan dras ovanför eller under rutan (Y utanför 0–1) för att skapa överskjutnings-/studseffekter som back-out och anticipate. X stannar inom 0–1 (tid kan inte gå baklänges).

Vanliga användningar

Anpassad CSS-övergångsföringDesigna naturligt känsliga övergångsvillkor för sväv, menyer och gränssnittsövergångar.
Studs och överskridningsanimationerSkapa lekfull fjäder-/studsrörelse genom att dra kontrollpunkter förbi rutan.
Easing för @keyframes-animationerVälj rätt animation-timing-function för CSS-keyframe-animationer.
Easingvärden för JS-animationsbibliotekFå cubic-bezier-värden för GSAP, Framer Motion, anime.js och mycket mer.
Förstå hur easing fungerarSe relationen mellan en bezier-kurva och rörelsen den producerar.

Så här fungerar det

Redigeraren är helt byggd i webbläsaren med React-state och SVG — inget bibliotek hanterar kurvmatematiken. Två dragbara kontrollpunkter definierar en kubisk SVG-Bezier-bana, och webbläsarens egen CSS-animationsmotor kör rörelseförhandsvisningen genom att injicera det resulterande cubic-bezier()-värdet direkt i en @keyframes-regel.

1
Dra eller skriv kontrollpunkter
Två handtag (P1 i turkos, P2 i rosa) sitter på en SVG-canvas. Att dra använder Pointer Events API med setPointerCapture så att handtaget följer ditt finger eller din markör även utanför SVG-gränsen. Du kan också knuffa handtag med piltangenterna eller skriva exakta värden i talinmatningarna x1/y1/x2/y2.
2
SVG ritar kurvan i realtid
Kurvan är ett enda SVG-<path>-element vars C-kommando (kubisk Bezier) räknas om från de fyra kontrollpunktskoordinaterna vid varje state-uppdatering. Ingen canvas, inget externt bibliotek — webbläsarens SVG-renderare ritar banan direkt.
3
Webbläsarens CSS-motor förhandsvisar utjämningen
Tre levande animationer (en glidande punkt, en breddövergång och en skalning) kör CSS @keyframes med cubic-bezier()-värdet injicerat inline. Webbläsarens egen animationsmotor tolkar kurvan, så det du ser är exakt vad din produktions-CSS kommer att ge.
4
Kopiera utdraget i ditt ramverks syntax
Flikar formaterar samma fyra tal som en CSS transition-timing-function, en godtycklig Tailwind-värdesklass, en Framer Motion-ease-array, eller en anime.js-utjämningssträng. Utdraget skrivs till urklipp med navigator.clipboard. Kurvan kodas också i URL-hashen (#b=x1,y1,x2,y2) så att du kan dela eller bokmärka den.