Lastnost transition-timing-function

Lastnost transition-timing-function določa hitrost spreminjanja (pospešek) gladkega prehoda transition. Na primer, najprej počasi, nato hitro, nato počasi in tako naprej.

Sintaksa

selektor {
	transition-timing-function: vrednost;
}

Vrednosti

Vrednost	Opis
`ease`	Najprej počasi, nato hitro, na koncu spet počasi.
`ease-in`	Začne se počasi in postopoma pospešuje.
`ease-out`	Začne se hitro in postopoma ustavi.
`ease-in-out`	Najprej počasi, nato hitro, na koncu spet počasi. Od ease se razlikuje po hitrosti.
`linear`	Vedno enaka hitrost.
`step-start`	Animacije ni, lastnost takoj prevzame končno vrednost.
`step-end`	Animacije ni, lastnost čaka čas, določen v `transition-duraton`, nato pa takoj prevzame končno vrednost.
`steps`	Vrednost lastnosti se spreminja s skoki.
`cubic-bezier`	Bézierjeva krivulja, ki lahko določa poljubno animacijo. Glej generator Bézierjevih krivulj.

Privzeta vrednost: ease.

Primerjava različnih vrednosti

Z miško se pomaknite nad spodnje bloke, da si ogledate delovanje vseh vrst časovnih funkcij:

Primer

Z miško se pomaknite nad blok - ta se bo gladko spremenil svojo širino v 2 sekundah. Ker je nastavljena vrednost ease-in, se bo animacija začela počasi in bo postopoma pospeševala:

<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;
}

Glejte tudi

lastnost transition-duration,
ki določa trajanje gladkega prehoda
lastnost transition-property,
ki določa ime lastnosti za gladki prehod
lastnost transition-delay,
ki določa zamik pred gladkim prehodom
lastnost transition,
ki je okrajšava za gladki prehod
lastnost animation,
s katero je mogoče narediti animacijo