Cubic-bezier-curvegenerator

De versnellingscurve (timing function) bepaalt hoe een CSS-transitie of -animatie in de tijd verloopt. Sleep de twee controlepunten, test het resultaat in de voorbeeldanimatie en kopieer de cubic-bezier()-waarde.

Wat is cubic-bezier()?

De eigenschappen transition-timing-function en animation-timing-function (of de derde waarde van transition) bepalen hoe de verandering over de duur wordt verdeeld. cubic-bezier(x1, y1, x2, y2) definieert een kubische Béziercurve die begint bij (0, 0) en eindigt bij (1, 1), met twee controlepunten: de X-as is de tijd en de Y-as de voortgang.

De CSS-sleutelwoorden zijn vooraf ingestelde curves: ease staat gelijk aan cubic-bezier(0.25, 0.1, 0.25, 1), ease-in aan (0.42, 0, 1, 1), ease-out aan (0, 0, 0.58, 1) en ease-in-out aan (0.42, 0, 0.58, 1). De curves easeIn…/easeOut… zijn de klassieke easingvergelijkingen van Robert Penner, veel gebruikt in animatiebibliotheken.

Tips

X-waarden moeten tussen 0 en 1 liggen, maar Y-waarden mogen daarbuiten: onder 0 of boven 1 schiet de animatie door en komt terug, een zacht vereffect zoals bij easeOutBack. Voor elementen die in beeld verschijnen werken uitgaande curves (ease-out) meestal het best: ze beginnen snel en remmen af aan het eind; voor elementen die verdwijnen, inkomende curves (ease-in).

Duren van 150 tot 400 ms zijn het gebruikelijkst in interfaces. Houd rekening met de voorkeur prefers-reduced-motion van mensen die liever minder animatie zien.