Wat is de standaard-easing in CSS?

Transitions en animaties gebruiken standaard ease, wat gelijk is aan cubic-bezier(0.25, 0.1, 0.25, 1): een snelle start en een rustig einde.

Hoe maak ik een doorschot- of stuitereffect?

Sleep een greep boven 1 of onder 0. easeOutBack, cubic-bezier(0.34, 1.56, 0.64, 1), schiet voorbij het eindpunt en komt dan terug tot rust. Eén kubische bézierkromme kan niet meerdere keren stuiteren; gebruik daarvoor keyframes of de functie linear().

Kan ik dezelfde waarde voor animaties gebruiken?

Ja. De waarde werkt in transition-timing-function, animation-timing-function en de optie easing van de Web Animations API.

Cubic-bezier-generator

Vorm CSS-easingcurves door twee grepen te verslepen. Vergelijk de beweging met lineaire timing en kopieer cubic-bezier() voor transitions of Tailwind.

Curve-editor

Versleep een van beide grepen. De stippellijn is lineaire timing.

Bewegingsvoorbeeld

Jouw curve

Lineair

Positie op elk tiende van de duur

transition: transform 1000ms ease;
/* or */
animation-timing-function: ease;

Alles blijft in je browser.

Referenties

MDN — cubic-bezier()
W3C — CSS Easing Functions Level 1

Pagina bijgewerkt: 2026-10-25

Curve-editor

Bewegingsvoorbeeld

Handleiding en voorbeeld

Gerelateerde tools

Referenties