Eigenschap animation-timing-function

De eigenschap animation-timing-function bepaalt de snelheidsverandering (versnelling) van de animatie. Bijvoorbeeld, eerst langzaam, dan snel, dan weer langzaam, enz.

Syntaxis

selector {
	animation-timing-function: waarde;
}

Waarden

Waarde	Beschrijving
`ease`	Eerst langzaam, dan snel, aan het einde weer langzaam.
`ease-in`	Begint langzaam en versnelt geleidelijk.
`ease-out`	Begint snel en vertraagt geleidelijk tot stilstand.
`ease-in-out`	Eerst langzaam, dan snel, aan het einde weer langzaam. Verschilt van ease in snelheid.
`linear`	Altijd dezelfde snelheid.
`step-start`	Geen animatie, de eigenschap neemt onmiddellijk de eindwaarde aan.
`step-end`	Geen animatie, de eigenschap wacht de tijd ingesteld in `animation-duraton`, en neemt dan onmiddellijk de eindwaarde aan.
`steps`	De waarde van de eigenschap verandert in sprongen.
`cubic-bezier`	Een Bézier-kromme die een willekeurige animatie kan definiëren. Zie Bézier-kromme generator.

Standaardwaarde: ease.

Vergelijking van verschillende waarden

Beweeg de muis over de onderstaande blokken om de werking van alle soorten timingfuncties te zien:

Zie ook

de eigenschap animation,
een verkorte eigenschap voor animaties
de regel @keyframes,
die de keyframes van de animatie definieert
vloeiende overgangen transition, die een animatie bij hover op een element vertegenwoordigen