Svojstvo animation-timing-function

Svojstvo animation-timing-function postavlja brzinu promene (ubrzanje) animacije. Na primer, prvo sporo, zatim brzo, pa opet sporo itd.

Sintaksa

cssselektor {
  animation-timing-function: vrednost;
}

Vrednost	Opis
`ease`	Prvo sporo, zatim brzo, na kraju opet sporo.
`ease-in`	Počinje polako i postepeno ubrzava.
`ease-out`	Počinje brzo i postepeno se zaustavlja.
`ease-in-out`	Prvo sporo, zatim brzo, na kraju opet sporo. Razlikuje se od ease po brzini.
`linear`	Uvek ista brzina.
`step-start`	Nema animacije, svojstvo odmah poprima konačnu vrednost.
`step-end`	Nema animacije, svojstvo čeka vreme, zadato u `animation-duraton`, a zatim trenutno poprima konačnu vrednost.
`steps`	Vrednost svojstva se menja skokovito.
`cubic-bezier`	Bezier-ova kriva, koja može zadati proizvoljnu animaciju. Vidi generator Bezier-ovih krivih.

Podrazumevana vrednost: ease.

Pređite mišem preko prikazanih blokova ispod, da biste videli rad svih vrsta vremenskih funkcija:

svojstvo animation,
koje predstavlja skraćeno svojstvo za animacije
komandu @keyframes,
koja zadaje ključne kadrove animacije
glatke prelaze transition, koji predstavljaju animaciju na prelazak mišem preko elementa