Cubic-bezier-generator
Maak een CSS-animatiecurve door de handvatten te slepen, met geanimeerde voorvertoning.
- Direct
- Gratis
- Privé (lokaal verwerkt)
- Zonder registratie
Teken je animatiecurve
Sleep de twee handvatten op de grafiek om de easing te vormen, kijk hoe de geanimeerde bal de beweging nabootst en kopieer de cubic-bezier()-waarde voor je CSS.
-
Begin met een preset
ease, ease-in-out, linear…
-
Pas de handvatten aan
X = tijd (0–1), Y vrij voor bounce.
-
Kopieer de CSS
Plak in transition of animation.
De CSS-presets
| Naam | cubic-bezier |
|---|---|
| linear | (0, 0, 1, 1) |
| ease | (0.25, 0.1, 0.25, 1) |
| ease-in | (0.42, 0, 1, 1) |
| ease-out | (0, 0, 0.58, 1) |
| ease-in-out | (0.42, 0, 0.58, 1) |
X beperkt tot [0,1], Y kan doorschieten voor bounces. Voorvertoning via de Web Animations API, alles blijft lokaal.
Veelgestelde vragen
Wat is een cubic-bezier-curve?
Het is de timingfunctie die beschrijft hoe een animatie versnelt en vertraagt. Ze wordt bepaald door twee controlepunten (x1, y1, x2, y2). In CSS: transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1).
Waarom kunnen Y-waarden boven 1 uitkomen?
X blijft tussen 0 en 1 (de tijd), maar Y kan buiten [0,1] gaan voor een bounce- of overshoot-effect (het element gaat verder en komt terug). Zo krijg je “back”- en elastische curven.
Hoe gebruik ik het in mijn CSS?
Plak de waarde in transition: all 0.3s cubic-bezier(…) of in animation-timing-function. De geanimeerde voorvertoning toont het echte resultaat vóór het plakken.
Wat zijn de standaardpresets?
ease = cubic-bezier(0.25, 0.1, 0.25, 1), ease-in = (0.42, 0, 1, 1), ease-out = (0, 0, 0.58, 1), ease-in-out = (0.42, 0, 0.58, 1), linear = (0, 0, 1, 1). Begin met een preset en pas de handvatten aan.