⌘K

Svojstvo transition-timing-function

Svojstvo transition-timing-function postavlja brzinu promene (ubrzanje) glatkog prelaza transition. Na primer, prvo polako, onda brzo, pa opet polako i tako dalje.

Sintaksa

cssselektor {
  transition-timing-function: vrednost;
}

Vrednosti

Vrednost Opis
ease Prvo polako, onda brzo, na kraju opet polako.
ease-in Počinje polako i postepeno ubrzava.
ease-out Počinje brzo i postepeno se zaustavlja.
ease-in-out Prvo polako, onda brzo, na kraju opet polako. Od ease se razlikuje po brzini.
linear Uvek ista brzina.
step-start Nema animacije, svojstvo odmah prima konačnu vrednost.
step-end Nema animacije, svojstvo čeka vreme, zadato u transition-duraton, a zatim trenutno prima 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.

Poređenje različitih vrednosti

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

Primer

Pređite mišem preko bloka - on će glatko promeniti svoju širinu za 2 sekunde. Pošto je postavljena vrednost ease-in, animacija će početi polako i postepeno će ubrzavati: 

html<div id="elem"></div>
css#elem {
  border: 1px solid black;
  transition-timing-function: ease-in;
  transition-duration: 2s;
  transition-property: width;
  height: 50px;
  width: 100px;
}
#elem:hover {
  width: 400px;
}

Результат:

Vidite takođe

BackSvojstvo transition-propertyNextSvojstvo transition