Egenskapen animation-timing-function

Egenskapen animation-timing-function ställer in förändringshastigheten (acceleration) för animationen. Till exempel, först långsamt, sedan snabbt, sedan långsamt igen, etc.

Syntax

cssselektor {
  animation-timing-function: värde;
}

Värden

Värde	Beskrivning
`ease`	Först långsamt, sedan snabbt, i slutet igen långsamt.
`ease-in`	Börjar långsamt och accelererar gradvis.
`ease-out`	Börjar snabbt och stannar gradvis.
`ease-in-out`	Först långsamt, sedan snabbt, i slutet igen långsamt. Skiljer sig från ease i hastighet.
`linear`	Alltid samma hastighet.
`step-start`	Ingen animation, egenskapen antar omedelbart slutvärdet.
`step-end`	Ingen animation, egenskapen väntar tiden, inställd i `animation-duraton`, och antar sedan omedelbart slutvärdet.
`steps`	Egenskapens värde ändras i steg.
`cubic-bezier`	En Bézier-kurva som kan skapa godtycklig animation. Se generator för Bézier-kurvor.

Standardvärde: ease.

Jämförelse av olika värden

För muspekaren över blocken nedan för att se alla typer av tidsfunktioner i arbete:

Se även

egenskapen animation,
som är en sammanfattande egenskap för animationer
kommandot @keyframes,
som anger nyckelbildrutor för animationen
mjuka övergångar transition, som är animationer vid hovring över ett element