Hoe maak ik een aangepaste cubic-bezier-easingcurve voor CSS?

Sleep de twee handvatten van de controlepunten op de grafiek, typ exacte x1-, y1-, x2-, y2-waarden, of kies een preset. Kies vervolgens CSS onder Uitvoerindeling en klik op Kopiëren om de cubic-bezier()-waarde voor transition-timing-function te krijgen.

Hoe maak ik een bounce- of overshoot-effect met cubic-bezier?

Sleep een handvat boven of onder het vak zodat de Y-waarde buiten 0-1 komt. Y kan dat bereik overschrijden, terwijl X tussen 0 en 1 blijft. De back-out- en anticipate-presets zijn kant-en-klare overshoot-startpunten.

Kan ik de easing voor Tailwind, Framer Motion of anime.js krijgen?

Ja. De tabs voor uitvoerindeling zijn CSS, Tailwind, Framer Motion en anime.js. Ze formatteren allemaal dezelfde vier getallen, dus kies een tab en klik op Kopiëren om het fragment op je klembord te zetten.

Hoe laad ik een bestaande cubic-bezier-waarde om deze te bewerken?

Plak een waarde zoals cubic-bezier(.17, .67, .83, .67) in het importvak en klik op Laden. Als er geen vier getallen kunnen worden gelezen, krijg je een foutmelding. De curve wordt ook opgeslagen in de pagina-URL na de hash, zodat deze gedeeld kan worden.

Waarom voelt de preview trager dan mijn echte transities?

De Bewegingsvoorvertoning gebruikt een Duur-instelling die je kunt wijzigen, en de standaardwaarden zijn langzamer zodat je de curve kunt bestuderen. Verkort de Duur en gebruik vervolgens Replay om de beweging te zien op de snelheid die je van plan bent te gebruiken.

Ja. Elke tool is gratis te gebruiken, zonder account en zonder creditcard. Het werk gebeurt op jouw apparaat in plaats van op onze servers, en daarom is het gratis te gebruiken.

Ja. Het werkt in actuele mobiele browsers op iOS en Android, zonder iets te installeren.

📈

Gratis CSS cubic-bezier-easinggenerator

Ontwerp CSS-easingcurves door controlepunten te slepen, bekijk de beweging live en kopieer de cubic-bezier()-waarde. Inclusief overshoot/bounce-presets.

Draait in je browserGeen aanmelding, geen pop-upsGeen aanmelding vereistVoor altijd gratis

Werkt offline na het laden

Sleep de groene & roze handvatten om de curve te vormen

Controlepunten

x1y1x2y2

Bewegingsvoorvertoning

Duur1,6 s

Breedteovergang

CSS-waarde

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

Voorinstellingen

De roze en groene handvatten kunnen boven of onder het vak worden getrokken (Y buiten 0-1) om 'overshoot'-/stuiterende effecten zoals back-out en anticipate te creëren. X blijft binnen 0-1 (tijd kan niet teruglopen).

Veelvoorkomend gebruik

Aangepaste CSS-overgangswaardeOntwerp natuurlijk aanvoelende easing voor hovereffecten, menu's en UI-overgangen.
Stuit- en Overshoot-animatiesCreëer speelse veer-/stuitbeweging door controlepunten voorbij de doos te trekken.
Easing voor @keyframes-animatiesKies de juiste animation-timing-function voor CSS-keyframe-animaties.
Easingwaarden voor JS-animatiebibliothekenKrijg cubic-bezier-waarden voor GSAP, Framer Motion, anime.js en meer.
Begrijp Hoe Easing WerktZie de relatie tussen een bezierkromme en de beweging die deze voortbrengt.

Hoe het werkt

De editor is volledig in de browser gebouwd met React-state en SVG — geen bibliotheek doet de curvewiskunde. Twee versleepbare controlepunten bepalen een kubisch Bézier-pad in SVG, en de eigen CSS-animatie-engine van de browser draait het bewegingsvoorbeeld door de resulterende cubic-bezier()-waarde direct in een @keyframes-regel te zetten.

1
Controlepunten slepen of typen
Twee grepen (P1 in teal, P2 in roze) staan op een SVG-canvas. Slepen gebruikt de Pointer Events API met setPointerCapture, zodat de greep je vinger of cursor volgt, ook buiten de SVG-rand. Je kunt grepen ook met de pijltoetsen verschuiven of exacte waarden typen in de invoervelden x1/y1/x2/y2.
2
SVG tekent de curve in realtime
De curve is één SVG <path>-element waarvan het C-commando (kubische Bézier) bij elke state-update opnieuw wordt berekend uit de vier coördinaten van de controlepunten. Geen canvas, geen externe bibliotheek — de SVG-renderer van de browser tekent het pad direct.
3
De CSS-engine van de browser toont de easing
Drie live animaties (een schuivende stip, een breedte-overgang en een schaling) draaien CSS-@keyframes met de cubic-bezier()-waarde inline ingevoegd. De eigen animatie-engine van de browser interpreteert de curve, dus wat je ziet is precies wat je productie-CSS zal doen.
4
Kopieer het fragment in de syntaxis van je framework
Tabbladen zetten dezelfde vier getallen om naar een CSS transition-timing-function, een Tailwind-klasse met willekeurige waarde, een Framer Motion-ease-array of een anime.js-easingstring. Het fragment wordt met navigator.clipboard naar het klembord geschreven. De curve wordt ook in de URL-hash gecodeerd (#b=x1,y1,x2,y2), zodat je hem kunt delen of als bladwijzer opslaan.