Animované barevné přechody v CSS

Běžný front-end vývojář musí čas od času použít barevné přechody u různých prvků na webové stránce. Typickým příkladem může být třeba barevné talčítko. Jenže rozhodneme-li se přidat k takovému tlačítku animaci, např. při najetí myši ho budeme chtít plynule zesvětlit, tak narazíme na problém, protože prohlížeč naší animaci jednoduše ignoruje. V dnešním článku bych rád ukázal zajímavou techniku jen za použití CSS, která problém animovaných přechodů do určité míry řeší.

Proč problém nastává?

Aby bylo možné si udělat představu, jak funguje původní neopravené řešení, tak jsem připravil malou ukázku:

Check out this Pen!

Důvod, proč nelze barevný přechod animovat, je jednoduchý. Podíváme-li se do specifikace, tak zde uvidíme celou řadu vlastností, na které lze animace použít. Barevné přechody musíme brát jako obrázky, které se renderují přímo v prohlížeči. A právě background-image není v seznamu podporovaných vlastností.

Jednoduchý trik pro jednoduché animace

Je sice pravda, že animaci nelze použít na vlastnost background-image, ale je zde stále řada jiných vlastností, které takové omezení nemají. Protože se jedná o jistý druh obrázku, tak máme k dispozici background-size a background-position. A právě background-position již animovat lze. Naleznete jí také v zmíněném seznamu.

Použijme tedy následující trik. Pozadí (barevný přechod) roztáhneme na výšku pomoci background-size na velikost rovnou dvojnásobku původní velikosti a po najetí myši posuneme celý obrázek o 100% nahoru (tzn. o celý původní rozměr). Zápis v CSS může vypadat následujícím způsobem:

.btn {
  background: linear-gradient(#ffce25,#ff9201);
  background-size: auto 200%;
  background-position: 0 100%;
  background-repeat: repeat;
}

Nezapomeňte dodržet pořadí zápisu a definovat barevný přechod před změnou jeho velikosti na 200%. Pak už jen zbývá přidat zmíněnou animaci a efekt, který nastane při přejetí myší:

.btn {
  transition-property: all;
  transition-duration: 0.25s;
  transition-timing-function: linear;
}

.btn:hover {
  background-position: 0 0;
}

Výsledek si můžete prohlédnout zde:

Check out this Pen!

Podpora běžných prohlížečů

Toto řešení je podporováno u těch prohlížečů, kde je již implementována podpora CSS vlastnosti linear-gradient:

• Chrome 4+
• Firefox 3.6+
• Opera 11.1+
• Safari 4+
• Internet Explorer 10+

Více informací naleznete zde http://caniuse.com/css-gradients.

I když v této ukázce nejsou podporovány starší verze prohlížečů Internet Explorer 8 a 9, tak nemusíme ještě házet flintu do žita. Toto řešení obsahuje jednoduchý fallback a při jejich použití se zobrazí se pouze čísté jednobarevné tlačítko s barvou definovanou u vlastnosti background. Přijdeme sice o animaci a barevný přechod, ale to je jediný rozdíl. Důležité je, že tlačítko neztratí rozměry a barevností zůstane také stejné.

Závěrem

Z ukázky lze vidět, že toto jednoduché řešení se hodí pouze na lineární tranformace. Nicméně tyto transformace bývají nejčastější a právě u prvků, jako jsou tlačítka, je využijeme nejvíce. Pokud však někdo z čtenářů objeví lepší a třeba i čistší řešení, budu velice rád, když se o něj podělí v komentářích.