Lastnost animation-timing-function

Lastnost animation-timing-function določa hitrost spreminjanja (pospešek) animacije. Na primer, najprej počasi, nato hitro, nato spet počasi itd.

Sintaksa

selektor {
	animation-timing-function: vrednost;
}

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 se 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 `animation-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.

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

lastnost animation,
ki je okrajšava za lastnosti animacij
ukaz @keyframes,
ki določa ključne sličice animacije
glasni prehodi transition, ki predstavljajo animacijo ob premiku miške nad element