Maak mijn eerste campagne
Woordenlijst · Animatie

Easing

De manier waarop een beweging versnelt en vertraagt tussen het begin en het einde.

In detail

Zonder easing beweegt een object met constante snelheid en ziet de beweging er mechanisch uit. Met easing begint het langzaam en eindigt het met remmen (of andersom), zoals echte objecten doen. In CSS hebben de curven namen als ease, ease-out of ease-in-out, of je schrijft ze met cubic-bezier() voor eigen curven. Namen als back of elastic zijn geen CSS-curven: het zijn namen uit animatiebibliotheken, zoals GSAP.

Vuistregel: wat de scène binnenkomt, remt meestal af bij aankomst (ease-out); wat weggaat, versnelt meestal (ease-in). Heel elastische curven trekken de aandacht, maar vermoeien als je ze in de hele banner gebruikt.

Voorbeeld
document.querySelector(".cta").animate({ transform: ["translateX(40px)", "none"] }, { duration: 600, easing: "ease-out" });

Gerelateerde termen

Keyframe

Waar het voorkomt

Hoe je een HTML5-banner voorbereidt voor de ad serverGidsVisualisator van animatiecurvenHulpmiddel
Terug naar de woordenlijst

Zet de termen in de praktijk.

Probeer het met een echte campagne.

Maak mijn eerste campagneBekijk de prijzen