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
selektor {
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ť:
<div id="elem"></div>
#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