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

selektor {
	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:

<div id="elem"></div>

#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

svojstvo transition-duration,
koje zadaje trajanje glatkog prelaza
svojstvo transition-property,
koje zadaje ime svojstva za glatki prelaz
svojstvo transition-delay,
koje zadaje kašnjenje pre glatkog prelaza
svojstvo transition,
koje je skraćeni zapis za glatki prelaz
svojstvo animation,
pomoću koga se može napraviti animacija