Vlastnosť transition-timing-function

Vlastnosť transition-timing-function nastavuje rýchlosť zmeny (zrýchlenie) plynulého prechodu transition. Napríklad, najprv pomaly, potom rýchlo, potom pomaly a tak ďalej.

Syntax

cssselektor {
  transition-timing-function: hodnota;
}

Hodnoty

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 `transition-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.

Porovnanie rôznych hodnôt

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

Príklad

Prejdite myšou na blok - plynule zmení svoju šírku za 2 sekundy. Pretože je nastavená hodnota ease-in, animácia začne pomaly a bude postupne zrýchľovať:

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

Результат:

Pozrite tiež

vlastnosť transition-duration,
ktorá nastavuje trvanie plynulého prechodu
vlastnosť transition-property,
ktorá nastavuje názov vlastnosti pre plynulý prechod
vlastnosť transition-delay,
ktorá nastavuje oneskorenie pred plynulým prechodom
vlastnosť transition,
ktorá je skratkou pre plynulý prechod
vlastnosť animation,
pomocou ktorej možno vytvoriť animáciu