Easingfuncties: ease linear cubic-bezier

Een versoepelingsfunctie bepaalt de snelheidskromme van een overgang of animatie — hoe snel deze gedurende de looptijd versnelt of vertraagt.

linear houdt gedurende de hele overgang een constante snelheid aan. Handig voor laad- en voortgangsbalken waarbij een gelijkmatige beweging wordt verwacht.

ease begint snel en vertraagt tegen het einde. Dit is de standaard en voelt natuurlijk aan voor de meeste UI-overgangen.

ease-in begint langzaam en versnelt. Geschikt voor elementen die het scherm verlaten (vertrekanimaties).

ease-out begint snel en vertraagt. Ideaal voor elementen die het scherm binnenkomen — ze verschijnen energiek en komen vloeiend tot stilstand.

ease-in-out begint en eindigt langzaam, met snellere beweging in het midden. Het meest geschikt voor herhalende animaties of animaties die heen en weer gaan.

Definieert een aangepaste kubische Bézierkromme met vier controlepunten. Hiermee kun je veerachtige en andere aangepaste versoepelingskrommen maken.

De vier waarden definiëren twee controlepunten: cubic-bezier(x1, y1, x2, y2). Waarden boven 1 op de y-as veroorzaken doorschietende effecten (zoals een veer). Gebruik hulpmiddelen zoals easings.net om krommen zichtbaar te maken.

steps(n, direction) verdeelt de animatie in n afzonderlijke, gelijke stappen. Perfect voor sprite-animaties en type-effecten.

Het tweede argument bepaalt waar de stap plaatsvindt:

• jump-start: de eerste stap op tijdstip 0
• jump-end: de laatste stap aan het einde (standaard)
• jump-both: stappen aan zowel het begin als het einde
• jump-none: geen stap aan beide uiteinden

Met de nieuwe functie linear() kun je via meerdere punten willekeurige versoepelingskrommen definiëren — zo maak je veer- en stuitereffecten in pure CSS zonder de beperkingen van cubic-bezier.

Versoepelingsfuncties bepalen de snelheidskrommen van animaties. Ingebouwde opties zijn: linear, ease, ease-in, ease-out en ease-in-out. Gebruik cubic-bezier() voor aangepaste krommen. Gebruik steps() voor afzonderlijke stappen. Met de nieuwe functie linear() maak je complexe, veerachtige krommen.