Cubic-Bézier easing-editor
Ontwerp aangepaste cubic-bezier easing-curves met een sleepbare editor en live animatievoorbeeld.
Sleep de twee grepen om de easing-curve vorm te geven.
transition-timing-function: —;
animation-timing-function: —;
Alles draait in je browser — er wordt niets geüpload.
Over Cubic-Bézier easing-editor
De Cubic-Bézier Easing Editor ontwerpt aangepaste timingfuncties voor CSS-transities en -animaties. Sleep de twee bedieningsgrepen op het curvecanvas en de waarde cubic-bezier(x1, y1, x2, y2) wordt live bijgewerkt; een animatiepreview speelt de easing af naast een lineaire referentie zodat je het verschil kunt voelen, met een aanpasbare duur en directe herhaling.
Tien presets dekken het gangbare vocabulaire — de standaard ease, ease-in, ease-out en ease-in-out, plus expressieve curves zoals back en anticipate die voorbij hun eindpunten overschieten, en material-achtige accelerate- en decelerate-versnellingen. Gebruik ze zoals ze zijn of als startpunt om naar iets eigens te slepen.
Je kunt ook exacte coördinaten van bedieningspunten intypen, op randomize klikken voor inspiratie, en ofwel de kale waarde cubic-bezier() ofwel een kant-en-klare CSS-regel kopiëren. De hele editor draait in je browser.
Hoe gebruik je Cubic-Bézier easing-editor
- Sleep de twee grepen op de curve-editor om de easing vorm te geven.
- Klik op Herhalen en vergelijk de easing-animatie met de lineaire referentie, en pas de duur aan indien nodig.
- Probeer de presets — ease, back, anticipate, material en meer — voor een snel startpunt.
- Verfijn met de numerieke invoervelden voor bedieningspunten voor exacte waarden.
- Kopieer de waarde cubic-bezier() of het complete CSS-fragment.