Easing-functies Cheatsheet

Easing-functies bepalen de mate van verandering van een waarde, gedurende een bepaalde periode.

Objecten in het dagelijks leven bewegen niet met een constante snelheid, en hun beweging start en stopt niet abrupt. Als je een lade opent begint de beweging snel, maar als de lade bijna helemaal open is vertraagt de beweging. Wanneer je iets laat vallen beweegt het sneller en sneller, tot het de grond aanraakt en terug omhoog stuitert.

Deze pagina helpt je bij het kiezen van de juiste easing-functie.

Open-source
Help site te vertalen naar jouw taal
xt
easeInSine
xt
easeOutSine
xt
easeInOutSine
xt
easeInQuad
xt
easeOutQuad
xt
easeInOutQuad
xt
easeInCubic
xt
easeOutCubic
xt
easeInOutCubic
xt
easeInQuart
xt
easeOutQuart
xt
easeInOutQuart
xt
easeInQuint
xt
easeOutQuint
xt
easeInOutQuint
xt
easeInExpo
xt
easeOutExpo
xt
easeInOutExpo
xt
easeInCirc
xt
easeOutCirc
xt
easeInOutCirc
xt
easeInBack
xt
easeOutBack
xt
easeInOutBack
xt
easeInElastic
xt
easeOutElastic
xt
easeInOutElastic
xt
easeInBounce
xt
easeOutBounce
xt
easeInOutBounce

x
t
CSS
In CSS kun je met de overgangs- en animatie-eigenschappen de easing-functie specificeren.
.block {
	transition: transform 0.6s ;
}
Bewerk op cubic-bezier.com.
In CSS kan deze functie geïmplementeerd worden met @keyframes:
Grootte
Laden...
Positie
Laden...
Transparantie
Laden...
PostCSS
In PostCSS is de easing-functie veel makkelijker te beschrijven. Er bestaat een plug-in postcss-easings die de overgangsinformatie van die site neemt.
.block {
	transition: transform 0.6s ;
}
Die declaratie wordt geconverteerd naar degene die hierboven is uitgelegd.
Helaas kan de easing-functie niet worden ingesteld met een PostCSS-plug-in. Dit kan gedaan worden met @keyframes, zie bovenstaande.
Kleurovergang
Het is mogelijk om een kleurovergang te maken met postcss-easing-gradients.
.block {
	background: linear-gradient(
		to bottom,
		#1473e6,
		,
		#247b5e
	);
}
Wiskundige functie
Hieronder zie je de code van deze easing-functie, geschreven in TypeScript. Variable x staat voor de absolute voortgang van de animatie van 0 (start animatie) tot 1 (einde animatie).
function (x: number): number {
}
Hieronder zie je de code van deze easing-functie, geschreven in TypeScript. Variable x staat voor de absolute voortgang van de animatie van 0 (start animatie) tot 1 (einde animatie).
function (x: number): number {
}
Test deze en lineare functie:
Deze functie:
Deze functie
Lineare functie:
Lineare functie