V CSS3 sú dva spôsoby, ako vytvoriť animáciu: CSS Transitions, ktoré nám umožňujú vytvoriť niektoré jednoduché efekty (ako je napr. :hover) alebo CSS Animations, prostredníctvom ktorých môžeme vytvárať zložitejšie efekty. Zdá sa vám, že vytvorenie peknej animácie len s použitím čistého CSS je nemožné? Od doby, čo CSS podporuje keyframes – sa môžeme priblížiť animáciam, aké sme doteraz poznali len z Adobe Flash alebo After Effect. V tomto článku si ukážeme základy animácie v CSS3.
CSS Animations sú pokročilé možnosti CSS a aj napriek tomu môžeme povedať, že je podpora CSS animácii zo strany prehliadačov na celkom dobrej úrovni. CSS Animations sú podporované všetkými hlavnými prehliadačmi v ich aktuálnej verzii – pokiaľ hovoríme o desktope. Jediný prehliadač, ktorý vám bude robiť trošku starosti je Internet Explorer.
Pokiaľ ide o mobilné prehliadače – CSS Animations sú podporované všetkými z nich, okrem Opery Mini – takže všetci, čo používajú Chrome, Firefox Mobile alebo Safari môžu sledovať CSS animácie bez problémov.
Syntax CSS @keyframes
Ako som už spomínal predtým – CSS animácie prácujú pomocou kľúčových snímok: keyframes. Ak chcete mať iba dve fázy animácie – použíjeme kľúčové slová FROM a TO:
@keyframes moving{ from { left: 100px } to { left: 300px; } }
Všetko čo animácia urobí je, že presunie prvok o 200 px doprava pri načítaní stránky. Kľúčové slovo moving umiestnené za @keyframes je názov našej animácie – pomenovali sme si túto sekvenciu, takže si ju neskôr môžeme „zavolať“, aby sme ju použili v inom prvku.
Ak potrebujeme vytvoriť viac kľúčových snímok, môžeme tak urobiť pomocou percenta:
@keyframes moving{ from { left: 100px } 25% { top: 300px; } 75% { top: 100px; } to { left: 300px; } }
Pomocou tejto myšlienky môžeme vytvoriť toľko kľúčových snímok, koľko len chceme – v jednotlivých častiach sekvencie môžeme zmeniť aj iné aspekty prvku: šírku, farbu, atď.
Aby sa nám kód CSS3 zobrazoval korektne vo všetkých prehliadačoch – budeme musieť pridať ich prefixy: v tomto prípade budeme potrebovať -webkit- a -moz- prefix a s nimi náš kód bude vyzerať takto:
@keyframes moving{ from { left: 100px } 25% { top: 300px; } 75% { top: 100px; } to { left: 300px; } } @-webkit-keyframes moving{ from { left: 100px } 25% { top: 300px; } 75% { top: 100px; } to { left: 300px; } } @-moz-keyframes moving{ from { left: 100px } 25% { top: 300px; } 75% { top: 100px; } to { left: 300px; } }
Použitie CSS animácie
Naša animácie je teraz definovaná, ale v prípade načítania stránky sa nič nestane – pretože sme ju ešte nepripojili na prvok / element. V prípade, že budem chcieť vytvoriť jednoduchý DIV, ktorému priradím animáciu „ moving“ a čas trvania animácie – bude to vyzerať asi takto:
.animate { animation-name: moving; animation-duration: 500ms; }
S týmito dvoma vlastnosťami bude naša animácia funkčná, ale bude mať dva hlavné „problémy“: animácia začne ihneď po načítaní stránky a prebehne iba raz. To môžeme vyriešiť nastavením oneskorenia animácie (animation-delay) a počtom opakovaní (animation-iteration-count). V prvom prípade sme nastavili oneskorenie animácie1500ms a v druhom sme nastavili nekonečnú slučku opakovaní:
.animate { animation-name: moving; animation-duration: 500ms; animation-delay: 1500ms; animation-iteration-count: infinite; }
Možnosti CSS3 sú široké a uvedené príklady sú len začiatkom toho, čo všetko sa dá s animáciou v CSS3 urobiť. A i keď sa jedná o veľmi mocný nástroj, treba myslieť na to, že Internet Explorer podporuje animácie až od verzie 10 – takže by ste mali dávať pozor, kde ich použijete vo vašom projekte. Je totiž ešte stále dosť ľudí, ktorí používajú IE9 a starší.