8.1. Funkce transition - funkce přechodu

V CSS lze použít již známé vlastnosti pseudotříd pro vytvoření změny. Může se to zdát hůře pochopitelné, ale na příkladu jistě rychle pochopíme:

toto je odkaz

<a href="#" class="link">toto je odkaz</a>

a.link {
    padding: 10px 20px;
    background-color: salmon;
    color: #fff;
}

a.link:hover {
    background-color: #1F2B6C;
}

Všimněte si, že můžeme změnit barvu pozadí odkazu, pokud na něj přejedeme kurzorem, díky pseudotříde :hover . Změna barvy odkazu je okamžitá. Co kdybychom chtěli, aby přechod barvy byl plynulý? Tak k tomu nám slouží transition. Podívejte se na odkaz níže:

toto je odkaz

<a href="#" class="link">toto je odkaz</a>

a.link {
    padding: 10px 20px;
    background-color: salmon;
    color: #fff;
    transition: all 0.7s ease-in-out; /* doplnění funkce přechodu */
}

a.link:hover {
    background-color: #1F2B6C;
}

Podívejme se, z čeho se funkce transition skládá. Zápis transition: all 0.7s easy-in-out je zápisem zkráceným. Roi¨zložme si jej na jednotlivé prvky:

    transition-property: all;
    transition-duration: 0.7s;
    transition-timing-function: ease-in-out;

• transition-property nám specifikuje, jaká vlastnost CSS bude pomocí přechodu měněna. Klíčové slovo all se váže na všechny vlastnosti. Pokud bychom chtěli měnit barvu textu, pak by hodnota byla color, v případě barvy pozadí pak background-color, apod.

    transition-property: color;
    transition-property: background-color;
    transition-property: border;

• transition-duration, neboli čas trvání přechodu. Čím větší čas, tím jemnější bude přechod animace. Zápis můžeme pomocí jednotek: sekund (s), nebo milisekund (ms).

• transition-timing-function, neboli způsob, jakým se prezentuje přechod. Je to funkce průbněhu času. V CSS jsou některé předdefinované:

transition-timing-function: linear; /* přechodný efekt má celou dobu stejnou rychlost */
transition-timing-function: ease; /* výchozí; začíná pomalu, poté zrychlí a ke konci je pomalejší */
transition-timing-function: ease-in; /* efekt má pomalý začátek a rychlý konec */
transition-timing-function: ease-out; /* Efekt má rychlý začátek a pomalý konec */
transition-timing-function: ease-in-out; /* Pomalý začátek a konec, rychlejší uprostřed */
transition-timing-function: cubic-bezier(n, n, n, n); /* vlastní nastavení rychlostní křivky, n nabývá hodnot 0.0 - 1.0 */

Jak funguje cubic-bezier() se můžeme podívat na stránkách cubic-bezier.com

• transition-delay určuje zpoždění přechodu. Zapisuje se opět pomocí časových jednotek, jako transition-duration. Ve zkráceném zápise by tato hodnota byla na posledním místě.

Ukázka odkazu s nastavenou hodnotou zpoždění (transition-delay): transition: all 0.7s easy-in-out 0.7s;

toto je odkaz