CSS Cubic-Bezier Generator

Wat is deze tool?

cubic-bezier() is een CSS-timingfunctie die bepaalt hoe een geanimeerde of overgangswaarde in de tijd versnelt en vertraagt, in plaats van met een constante snelheid te bewegen. Ze wordt gedefinieerd door twee controlepunten — (x1, y1) en (x2, y2) — die een curve buigen tussen een vast startpunt (0,0) en eindpunt (1,1). De x-waarden moeten tussen 0 en 1 blijven, maar y-waarden kunnen buiten dat bereik gaan om overshoot- of bounce-effecten te creëren.

Met de hand geschreven kost het afstemmen van vier decimale getallen om een gevoel te krijgen dat niet te abrupt en niet te slap is veel trial-and-error. Deze tool vervangt dat giswerk door directe manipulatie: sleep een schuif, bekijk hoe de curve buigt en het voorbeeldbolletje beweegt, en kopieer de CSS zodra de beweging goed aanvoelt.

Bron: CSS Easing Functions Level 1, W3C — de specificatie die cubic-bezier() en de vijf benoemde keywords definieert waarop de presets van deze tool zijn gebaseerd.

Waarom gebruiken?

• Live SVG-grafiek toont precies hoe je curve buigt tussen het vaste start- en eindpunt, met beide controlepunten en hun handvatten duidelijk getekend.
• Afspeelknop animeert een voorbeeldelement over een baan met je exacte curve, zodat je de beweging voelt, niet alleen een statische grafiek ziet.
• Presets met één klik voor de vijf standaard benoemde easingfuncties — ease, ease-in, ease-out, ease-in-out en linear — zoals gedocumenteerd in de CSS Easing Functions-specificatie.
• Y-waarden kunnen onder 0 of boven 1 gaan, waardoor je overshoot-/bounce-achtige easings kunt bouwen die de benoemde keywords niet kunnen produceren.
• Levert klaar-om-te-plakken transition-timing-function CSS — dezelfde waarde werkt ook voor animation-timing-function.
• Draait volledig in je browser — niets van wat je configureert wordt ergens naartoe geüpload. Gratis, geen aanmelding.

Hoe te gebruiken

1. Sleep de x1/y1-schuiven om het eerste controlepunt in te stellen, dat bepaalt hoe de animatie begint.
2. Sleep de x2/y2-schuiven om het tweede controlepunt in te stellen, dat bepaalt hoe de animatie eindigt.
3. Bekijk de zwarte curve op de grafiek — een curve die vroeg boven de diagonaal uitbolt betekent dat de beweging snel begint, één die eronder blijft betekent dat de beweging langzaam begint.
4. Klik op Afspelen om te zien hoe een voorbeeldelement over de baan beweegt met jouw curve als transition-timing-function.
5. Probeer een preset (ease, ease-in, ease-out, ease-in-out, linear) als startpunt en stel de schuiven vandaaruit verder bij.
6. Kopieer de gegenereerde CSS en plak hem in een transition- of animation-regel.

Voorbeeld

Invoer

x1: 0.25, y1: 0.1, x2: 0.25, y2: 1

Uitvoer

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

Dit is het standaard CSS ease-keyword uitgeschreven als expliciete controlepunten — een snelle start, scherpe versnelling, en dan een geleidelijke vertraging naar het einde toe.

Waarom y-waarden buiten 0–1 kunnen gaan

In tegenstelling tot de x-as, die tijd voorstelt en van 0 naar 1 moet lopen, stelt de y-as de voortgang van de geanimeerde waarde voor en kent deze geen zo'n limiet. Door y1 onder 0 of y2 boven 1 te zetten, duikt de curve voorbij de startwaarde of schiet hij voorbij de eindwaarde voordat hij zich settelt — de basis van overshoot- en anticipatie-effecten die gebruikt worden bij knopdrukken, modalpop-ins en speelse micro-interacties in de UI. Geen van de vijf benoemde keywords (ease, ease-in, ease-out, ease-in-out, linear) kan dit produceren; daarvoor heb je een aangepaste cubic-bezier() nodig.

transition-timing-function versus animation-timing-function

De cubic-bezier()-waarde die deze tool genereert, werkt identiek in beide eigenschappen. Gebruik transition-timing-function wanneer de beweging wordt getriggerd door een statusverandering (zoals een hover of een class-wissel), en animation-timing-function binnen een door @keyframes aangestuurde animatieregel wanneer je dezelfde easingsfeer automatisch of in een lus toegepast wilt hebben.

Veelvoorkomende easingpatronen

• Snelle UI-feedback (knoppen, schakelaars): houd de controlepunten dicht bij de diagonaal met een lichte ease-out-neiging, bijv. cubic-bezier(0.4, 0, 0.2, 1).
• De standaardcurve van Material Design: cubic-bezier(0.4, 0, 0.2, 1) — snelle start, zachte afsluiting, veel gebruikt voor paneel- en kaartovergangen.
• Bounce/overshoot: duw y2 boven 1, bijv. cubic-bezier(0.34, 1.56, 0.64, 1), voor een speels pop-ineffect.
• Anticipatie vóór beweging: duw y1 onder 0 zodat het element zich licht terugtrekt voordat het vooruit beweegt.
• Vloeiende ease-in-out voor lussende animaties: houd de curve nagenoeg symmetrisch rond het midden.

Combineren met andere CSS-tools

Een easingcurve staat zelden op zichzelf — hij wordt meestal toegepast op een element dat ook schaduwen, afgeronde hoeken of gradients nodig heeft. Genereer de visuele styling met de andere CSS-tools hieronder en voeg vervolgens de timingfunctie van deze tool toe aan dezelfde regel of een transition-/animation-declaratie.

→ Box Shadow Generator · Border Radius Generator

Veelgestelde vragen