Vlastnosť animation-timing-function

Vlastnosť animation-timing-function nastavuje rýchlosť zmeny (zrýchlenie) animácie. Napríklad, najprv pomaly, potom rýchlo, potom pomaly atď.

Syntax

selektor {
	animation-timing-function: hodnota;
}

Hodnota	Popis
`ease`	Najprv pomaly, potom rýchlo, na konci opäť pomaly.
`ease-in`	Začína pomaly a postupne zrýchľuje.
`ease-out`	Začína rýchlo a postupne sa zastavuje.
`ease-in-out`	Najprv pomaly, potom rýchlo, na konci opäť pomaly. Od ease sa líši rýchlosťou.
`linear`	Vždy rovnaká rýchlosť.
`step-start`	Animácia nie je, vlastnosť okamžite nadobudne konečnú hodnotu.
`step-end`	Animácia nie je, vlastnosť čaká čas, daný v `animation-duraton`, a potom okamžite nadobudne konečnú hodnotu.
`steps`	Hodnota vlastnosti sa mení skokmi.
`cubic-bezier`	Bezierova krivka, ktorá môže definovať ľubovoľnú animáciu. Pozri generátor Bezierových kriviek.

Predvolená hodnota: ease.

Prejdite myšou nad uvedené bloky, aby ste videli činnosť všetkých typov časových funkcií:

vlastnosť animation,
ktorá je skrátenou vlastnosťou pre animácie
príkaz @keyframes,
definujúci kľúčové snímky animácie
plynulé prechody transition, ktoré predstavujú animáciu pri prejdení myšou nad element