Vlastnost animation-timing-function

Vlastnost animation-timing-function nastavuje rychlost změny (zrychlení) animace. Například nejdříve pomalu, pak rychle, pak zase pomalu atd.

Syntaxe

cssselektor {
  animation-timing-function: hodnota;
}

Hodnota	Popis
`ease`	Nejprve pomalu, pak rychle, na konci zase pomalu.
`ease-in`	Začíná pomalu a postupně zrychluje.
`ease-out`	Začíná rychle a postupně se zastavuje.
`ease-in-out`	Nejprve pomalu, pak rychle, na konci zase pomalu. Od ease se liší rychlostí.
`linear`	Vždy stejná rychlost.
`step-start`	Animace není, vlastnost okamžitě přijímá konečnou hodnotu.
`step-end`	Animace není, vlastnost čeká čas stanovený v `animation-duraton`, a poté okamžitě přijímá konečnou hodnotu.
`steps`	Hodnota vlastnosti se mění skoky.
`cubic-bezier`	Bezierova křivka, která může zadat libovolnou animaci. Viz generátor Bezierových křivek.

Výchozí hodnota: ease.

Najeďte myší na níže uvedené bloky, abyste viděli funkci všech typů časových funkcí: