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
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