Animace na webu pomocí CSS3

CSS3 mezi roky 2007 a 2009 získali nové funkce, které se stali naprostou revolucí, od té doby se na funkcích stále pracuje a dnes jde pomocí kódu a prohlížeče již modelovat i 3D videa a pracovat s prvky lépe než-li to uměl starý dobrý flash. (jako například tento muzejní kousek)

K pochopení tohoto návodu je zapotřebí min základů práce s CSS.

Co potřebujeme k animování?

No vlastně toho moc není, postačí textový editor a prohlížeč podporující CSS3. Jednotlivé podporované funkce verzí prohlížečů si můžete prohlédnout tady, ale v základu platí chci-li něco moderního potřebuju poslední verzi běžných prohlížečů, my se určitě budeme soustředit na žrouta paměti Chrome, ale při psaní nezapomeneme ani na nastavení pro Firefox nebo Safari.

Budu předpokládat, že jste si právě připravili index.html a style.css ve své složce.

Otevřeme si tedy oba soubory v textovém editoru a jdeme z ničeho udělat něco co se hýbe.

Krok 1 – Šablona

My budeme pracovat od nuly, není však nejmenší problém prvky a animace převádět přímo do připravených a již funkčních šablon.

Základní animací vyvoláme pomocí transition

První příklad je plynulá animace hover, tedy změna z původního nastavení na nové po najetí myši.

Toto lze aplikovat na každý prvek, text, div nebo klidně celé pozadí stránky.

Kód funguje tak, že prvek o velikosti 150×150 pixelů má modrou barvu a je uprostřed, po najetí tedy řádek níže říká, že se bazva změní na modrou, plynulost animace zajištuje aplikování zmíněného transition.

Co říká zápis transition?

„all“ říká všechno co se dá změnit, změň. Lze zvolit například jen background, v našem případě to bude fungovat stejně.
1s = jednu sekundu bude probíhat animace.
„ease“ je druh animování o dalších typech si řekneme níže.

transition: all 1s ease;

See the Pen
CSS Animace – 01 by Daniel (@Deight)
on CodePen.

Další příklad je pohyb, pokud na něco najedu můžu to posunout nebo zvětšit, odsunout mimo viditelnou plochu cokoliv mě napadne.

See the Pen
CSS3 Animace – 02 by Daniel (@Deight)
on CodePen.

Posledním ze základů je spuštění animace bez spouštěče, jednoduše autoplay.

Vycházíme z animace výše, ale kód neobsahuje řádek spouštění, ten je nahrazený „scénáře“ co se deje v čase.

Nastavení animaci:

První píšeme název animace, ten u každé animace musíme zvolit jedinečný. My jsme zvolili „ukaznova-animace“ (bez diakritiky).
Další je opět délka trání animace, zde 3 sekundy.
Poslední je nastavení animovat stále ne jen jednou, „infinite„.

animation: ukazkova-animace 3s infinite;

See the Pen
CSS3 Animace – 03 by Daniel (@Deight)
on CodePen.

Tipy:

V první řadě výše zmíněné podpory prohlížečů vyžadují u animací vlastní zápis, je tedy vždy nutné neopomenout animaci například pro Firefox, pak nám animace na tomto prohlížeči nepoběží.

Příklad:

-webkit-transition: background-color 2s ease;
-moz-transition: background-color 2s ease;
-o-transition: background-color 2s ease;
transition: background-color 2s ease;

Správný zápis transition je tedy vždy se všemi čtyřmi řádky.

Opět jak jsem zmiňoval na začátku druh animace ease je jen jeden z několika možností jak animovat, animaci mohu například změnit na plynulou, rychle na začátku a potom pomalu, nebo naopak, přesné příklady jak animace vypadá a jak je zapsat najdete zde + níže jejich varianty:

animation-timing-function: ease;
animation-timing-function: ease-in;
animation-timing-function: ease-out;
animation-timing-function: ease-in-out;
animation-timing-function: linear;
animation-timing-function: step-start;
animation-timing-function: step-end;

Pokud by vám toto množství nevyhovovalo a nenašli jste svůj styl, zde jsou další nové možnosti https://easings.net/

Pro základní práci jsme si ukázaly jen základ, ale to měl být smysl článku, v případě potřeby rád pomůžu a poradím, kontaktujte mě.

Pokročilé animace budou v následujícím článku.

Pokud článek naplnil vaše očekávání, budu rád, když zanecháte zpětnou vazbu níže komentář nebo ohodnotíte zpracování.

Deight.eu