Egenskapen animation-timing-function

Egenskapen animation-timing-function setter endringshastigheten (akselerasjonen) for animasjon. For eksempel, først sakte, deretter fort, deretter sakte osv.

Syntaks

velger {
	animation-timing-function: verdi;
}

Verdier

Verdi	Beskrivelse
`ease`	Først sakte, deretter fort, på slutten igjen sakte.
`ease-in`	Begynner sakte og akselererer gradvis.
`ease-out`	Begynner fort og stopper gradvis.
`ease-in-out`	Først sakte, deretter fort, på slutten igjen sakte. Skiller seg fra ease i hastighet.
`linear`	Alltid samme hastighet.
`step-start`	Ingen animasjon, egenskapen tar umiddelbart den endelige verdien.
`step-end`	Ingen animasjon, egenskapen venter i den tiden satt i `animation-duraton`, og tar deretter øyeblikkelig den endelige verdien.
`steps`	Verdien av egenskapen endres med hopp.
`cubic-bezier`	Bezier-kurve som kan definere vilkårlig animasjon. Se generator for Bezier-kurver.

Standardverdi: ease.

Sammenligning av ulike verdier

Hold musepekeren over boksene nedenfor for å se alle typer tid-funksjoner i arbeid:

Se også

egenskapen animation,
som er en sammentreningsegenskap for animasjoner
kommandoen @keyframes,
som definerer nøkkelrammer for animasjon
jevne overganger transition, som representerer animasjon ved å holde over elementet