Belangrijkste punten
- 01Sleep de twee controlepunthandvatten om de easing curve visueel te vormen in plaats van numerieke waarden te raden.
- 02Een live balanimatie speelt de timing af zodat je de beweging voelt voordat je eraan vastlegt.
- 03Alle vijf ingebouwde CSS-presets (ease, linear, ease-in, ease-out, ease-in-out) zijn beschikbaar als startpunten.
- 04De cubic-bezier() waarde wordt live bijgewerkt met twee decimalen precisie, klaar om in elke CSS-eigenschap in te plakken.
Waarom aangepaste easing curves belangrijk zijn voor UI-beweging
De ingebouwde timing functions van CSS — ease, ease-in-out, linear — dekken veel situaties af, maar elke UI heeft momenten waarop de standaard zich net verkeerd voelt. Een tooltip die te snel verschijnt, een modal die bij het openen overschiet, een voortgangsbalk die mechanisch aanvoelt. Cubic-bezier curves laten je beweging natuurlijk laten aanvoelen in plaats van mechanisch, maar de vier getallen in cubic-bezier(0.4, 0, 0.2, 1) zijn vrijwel onmogelijk direct te doorgronden.
De cubic-bezier editor van Handytool zet die getallen om in een visuele curve met twee sleepbare handvatten. Verplaats een handvat en de balanimatie speelt onmiddellijk af, zodat je door gevoel kunt itereren totdat de beweging je bedoeling aansluit. Kopieer vervolgens de waarde en plaats deze in je CSS — klaar.
Hoe je een CSS easing curve ontwerpt
- 01
Begin met een preset
Selecteer ease, linear, ease-in, ease-out of ease-in-out als basis. De handvatten snappen naar de juiste posities voor elke preset.
- 02
Sleep de controlepunthandvatten
Elk handvat bepaalt één uiteinde van de curve — het starthandvat bepaalt de initiële versnelling, het eindhandvat bepaalt de uiteindelijke vertraging. Het verplaatsen van een handvat schakelt de preset automatisch naar 'custom'.
- 03
Bekijk de balanimatie
Een bal beweegt van links naar rechts met behulp van je curve. Pas de duurschuif aan om trage versus snelle overgangen voor te bekijken.
- 04
Experimenteer met overshoot
Sleep een Y-as handvat boven 1 of onder 0 om overshoot en undershoot te creëren — het 'springerige' effect dat een menu energiek laat openvallen.
- 05
Kopieer de CSS-waarde
Klik op Kopiëren om de cubic-bezier() string te pakken en plak deze in transition-timing-function of animation-timing-function in je stylesheet.
Werkt volledig in je browser
De editor is een zelfstandig browsertool — geen lettertypen, geen scripts en geen gegevens worden geladen nadat de pagina is geopend. Het slepen van handvatten en het bekijken van animaties werkt offline. De cubic-bezier formule die voor de preview bal wordt gebruikt, is dezelfde die browsers gebruiken voor CSS-overgangen, dus wat je in de editor ziet, is precies wat je stylesheet zal produceren.
Er is niets om te installeren en niets om je voor aan te melden. De uitvoer is een enkele CSS-waarde — plak deze en je bent klaar.
Veelgestelde vragen over Cubic-Bezier Editor
Wat is een cubic-bezier easing curve?
Het is een wiskundige curve gedefinieerd door twee controlepunten die bepalen hoe een CSS-overgang of animatie in de loop der tijd versnelt. De vier getallen in cubic-bezier(x1, y1, x2, y2) stellen de posities van die controlepunten in.
Waarom kunnen de Y-waarden boven 1 of onder 0 gaan?
Y-waarden buiten 0–1 produceren overshoot en undershoot — de curve gaat voorbij het eindpunt voordat deze zich stabiliseert. Dit creëert 'springerige' easing curves. De X-waarden moeten tussen 0–1 blijven.
Hoe gebruik ik de uitvoer?
Kopieer de cubic-bezier(...) string en plak deze in elke CSS transition-timing-function of animation-timing-function waarde. Het werkt in elke moderne browser.
Wat betekent ease-in-out eigenlijk?
Ease-in-out begint langzaam, versnelt in het midden en vertraagt aan het einde — cubic-bezier(0.42, 0, 0.58, 1). Het weerspiegelt hoe echte objecten versnellen en vertragen en is de standaardkeuze voor meeste gepolijste UI-beweging.
Is de balanimatie preview nauwkeurig voor CSS?
Ja — de preview gebruikt dezelfde cubic bezier formule die browsers toepassen op CSS-overgangen. Met de duurschuif kun je trage versus snelle curves voelen voordat je eraan vastlegt.