Cubic-bezier editor

Functies van Cubic-bezier editor

• 01

  Sleep de curve, zie de beweging

  Twee versleepbare handvatten regelen het begin en het einde van de bezier. De begeleide balanimatie speelt de curve af in de duur die je kiest, zodat je overshoot en ease-out feel kunt voorbeelden zonder de pagina te verlaten.

• 02

  Alle standaard presets

  Begin met CSS's ingebouwde ease, linear, ease-in, ease-out en ease-in-out — voer dan fine-tune uit. De preset-switch schakelt automatisch naar "custom" wanneer je een handvat beweegt.

• 03

  Kopieer CSS met één klik

  De cubic-bezier() waarde wordt live bijgewerkt met twee-decimale precisie, klaar voor drop in transition-timing-function of animation-timing-function.

Veelgestelde vragen over Cubic-bezier editor

Waarom kunnen de Y-waarden boven 1 of onder 0 gaan?

Bezier controlepunten buiten het 0–1 bereik produceren overshoot en undershoot effecten — de curve gaat voorbij zijn eindpunt voordat het zich stabiliseert. Dit is hoe "bouncy" easing-curves worden gemaakt; de X-as moet nog steeds in 0–1 blijven.

Hoe gebruik ik de uitvoer?

Kopieer de cubic-bezier(...) string en plak deze in een CSS transition-timing-function of animation-timing-function waarde. Het werkt in elke moderne browser.

Is het preview nauwkeurig voor wat CSS zal doen?

Ja — het preview animeert een bal van 0 naar 100% met dezelfde cubic bezier-formule die browsers gebruiken voor transitions. De duration-schuif stelt je in staat om trage versus snelle curves te voelen voordat je je ertoe verbindt.

Wat betekent ease-in-out eigenlijk?

Ease-in-out begint langzaam, versnelt in het midden en vertraagt weer aan het einde — de cubic-bezier(0.42, 0, 0.58, 1) curve. Het is de standaard voor de meeste gepolijste UI-bewegingen omdat het weerspiegelt hoe echte fysieke objecten versnellen en vertragen.