Vlastnost transition-timing-function

Vlastnost transition-timing-function nastavuje rychlost změny (zrychlení) plynulého přechodu transition. Například, nejdříve pomalu, pak rychle, pak pomalu a tak dále.

Syntaxe

cssselektor {
  transition-timing-function: hodnota;
}

Hodnoty

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

Výchozí hodnota: ease.

Porovnání různých hodnot

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

Příklad

Najeďte myší na blok - plynule změní svou šířku za 2 sekundy. Protože je nastavena hodnota ease-in, animace začne pomalu a bude postupně zrychlovat:

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

css#elem {
  border: 1px solid black;
  transition-timing-function: ease-in;
  transition-duration: 2s;
  transition-property: width;
  height: 50px;
  width: 100px;
}
#elem:hover {
  width: 400px;
}

Результат:

Viz také

vlastnost transition-duration,
která nastavuje délku trvání plynulého přechodu
vlastnost transition-property,
která nastavuje název vlastnosti pro plynulý přechod
vlastnost transition-delay,
která nastavuje zpoždění před plynulým přechodem
vlastnost transition,
která je zkratkou pro plynulý přechod
vlastnost animation,
pomocí které lze vytvořit animaci