In dit artikel
Wat zijn kubische Bezier-curven?
Een kubische Bezier-curve is een wiskundige functie die in CSS wordt gebruikt om de timing van animaties en transities te bepalen. Geschreven als cubic-bezier(x1, y1, x2, y2), beschrijft het hoe een animatie van begin tot eind verloopt door tijd te mappen op voortgang langs een vloeiende curve gedefinieerd door vier controlepunten.
In CSS regelt de functie cubic-bezier() de easing van de eigenschappen transition-timing-function en animation-timing-function. In plaats van lineaire beweging kunt u natuurlijk aanvoelende versnellingen en vertragingen creeren die de fysica van de echte wereld nabootsen, waardoor UI-animaties gepolijst en doelgericht aanvoelen.
De vier controlewaarden begrijpen
De functie cubic-bezier() neemt vier waarden die twee controlepunten op de curve definieren. Deze controlepunten bepalen hoe de animatie versnelt en vertraagt.
- X1 (0-1) — de horizontale positie van het eerste controlepunt, bepaalt wanneer de initiele versnellingsfase eindigt
- Y1 (elke waarde) — de verticale positie van het eerste controlepunt, regelt hoe snel de animatie start. Waarden boven 1 creeren een overshoot-effect
- X2 (0-1) — de horizontale positie van het tweede controlepunt, bepaalt wanneer de vertragingsfase begint
- Y2 (elke waarde) — de verticale positie van het tweede controlepunt, regelt hoe de animatie eindigt. Waarden boven 1 creeren een stuitend overshoot-effect
Probeer gratis — geen aanmelding vereist
Maak een kubische Bezier-curve →Veelgebruikte easing-presets en wanneer ze te gebruiken
CSS biedt verschillende ingebouwde easing-trefwoorden die overeenkomen met specifieke cubic-bezier-waarden. Deze presets begrijpen helpt u het juiste gevoel voor uw animaties te kiezen.
- ease (0.25, 0.1, 0.25, 1.0) — de CSS-standaard, start snel en vertraagt dan geleidelijk. Goed voor de meeste algemene transities
- ease-in (0.42, 0, 1.0, 1.0) — start langzaam en versnelt. Het beste voor elementen die het scherm verlaten of uitfaden
- ease-out (0, 0, 0.58, 1.0) — start snel en vertraagt. Ideaal voor elementen die het scherm binnenkomen of verschijnen
- ease-in-out (0.42, 0, 0.58, 1.0) — langzame start en langzaam einde met sneller midden. Geschikt voor lus-animaties of elementen die op het scherm blijven
- linear (0, 0, 1, 1) — constante snelheid van begin tot eind. Gebruik voor voortgangsbalken, laadspinners of kleurovergangen waar uniforme snelheid natuurlijk aanvoelt
Veelgestelde vragen
Ondersteunen alle browsers cubic-bezier()?
Ja. De functie cubic-bezier() wordt ondersteund in alle grote browsers sinds IE 10 (2012). Het maakt deel uit van de CSS Transitions en CSS Animations specificaties, die volledig worden ondersteund in Chrome, Firefox, Safari, Edge en alle moderne mobiele browsers.
Kan ik spring- of stuitanimaties maken met cubic-bezier()?
Kubische Bezier-curven kunnen eenvoudige stuiteffecten benaderen door Y-waarden groter dan 1 te gebruiken (overshoot). Bijvoorbeeld, cubic-bezier(0.34, 1.56, 0.64, 1) creert een lichte overshoot. Echte veerfysica met meerdere stuiteringen vereist echter CSS spring() (nog niet breed ondersteund) of JavaScript-animatiebibliotheken zoals GSAP of Framer Motion.
Wat is het verschil tussen CSS-transities en CSS-animaties?
CSS-transities animeren tussen twee toestanden wanneer een eigenschap verandert (bijv. bij hover). CSS-animaties gebruiken keyframes om meerstaps-sequenties te definieren die kunnen herhalen en onafhankelijk kunnen draaien. Beide gebruiken dezelfde timingfuncties, waaronder cubic-bezier(), om de easing tussen toestanden of keyframes te regelen.