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