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ší.