Prolnutí v CSS – transition

Občas se nám na webu hodí, když chceme nechat po hoveru prolnout nějaký prvek. K tomu nám slouží šikovná vlastnost v CSS – transition. Transition má pouze jeden parametr a to číslo s eskem.

Příklad: transition: 0.8s značí, že se nám bude prolnutí u hoveru trvat 0,8 sekundy. Jen chci upozornit, že pokud v CSS značíme desetinné číslo, píšeme vždy tečku (místo čárky). Živá ukázka.

HTML:

<a href="http://mujskript.cz">MůjSkript.cz</a>

CSS:

a {
    color: green;
    text-decoration: underline;
    font-weight: bold;
}
 
a:hover {
    color: red;
    text-decoration: none;
    transition: 0.8s;
}

Pokud bychom chtěli i zpětný efekt, po odjetí myší z prvku, vložíme vlastnost transition i k samotnému prvku (bez hoveru). Zde tedy změníme pouze CSS. U zpětného transitionu můžeme mít jinou hodnotu (= jinou délku přechodu). Živá ukázka.

CSS:

a {
    color: green;
    text-decoration: underline;
    font-weight: bold;
    transition: 0.8s; /* Zde se nastavuje zpětný efekt po odjetí myší. Může mít jinou hodnotu */
}
 
a:hover {
    color: red;
    text-decoration: none;
    transition: 0.8s;
}

Máte-li nějaké dotazy, piště do komentářů.

Napište komentář!