CSS3: Čas na animáciu?

Vždy keď sa stretnete s niečím, čo Vás môže obohatiť, premýšlate, či to skutočne zvládnete, alebo nie. Ja som človek, čo si rád zašomre, bo sa mu nechce, ale nakoniec mi to nedá a skúšam hľadať riešenia. Čo sa mi prihodilo? Prerábal som banner z flash-u do CSS3. Fuuu. A ako?

Skúste si to predstaviť. Dostanete SWF súbor v ktorom je (našťastie) jednoduchá animácia. Nejaké tie posuny textu plus efekt typu fade-in a fade-out. Viacmenej nejaké 4 textové slajdy. Prvé čo mi napadlo bolo, že určite existuje niečo, čo by vedelo prekonvertovať SWF do HTML, no nie? A tak som - ako správny neťák - guuuglil. Narazil som priamo na nástroj, ktorý vytvorili v Google Labs - Swiffy [Swiffy na gLabs]. Nahráte Vaše swf a čakáte, čo to "vypluje". V mojom prípade, nakoľko boli použité embedované fonty (nie klasické), animácia síce bola pekná, no bez fontu, ktorý by som potreboval. Čo teda ďalej? Ako to riešiť?

CSS3 a jQuery?

Áno. Prvá vec, čo mi napadla bolo CSS3 kôli @font-face. Nakoľko ak idete robiť banner, ktorý má byť hlavne pre mobilné zariadenia, musíte myslieť hlavne na jeho veľkosť. Viem, asi sa pýtate sami seba, či pri použití @font-face sa dá hovoriť o optimalizácii, ale verte či nie, áno, dá. Dôvod? Každý prehliadač si stiahne len ten typ fontu, ktorý potrebuje pre správne renderovanie. (Aspoň by to tak malo byť). A čo rozhodovanie o tom, akú animáciu voliť? Máme dva spôsoby, ako môžeme takýto banner animovať.

Animovať pomocou jQuery .animate()

To bola moja prvá voľba. Samozrejme, že keď som to odovzdal, klient mi to poslal späť aby som opravil HTML a prerobil to na úplnú CSS3 animáciu. Údaje, čo prehliadače, ktoré nepodporujú Javascript?! Trošku som sa zasmial, pretože ak nepodporujú JavaScript, tak CSS3 nevyrieši reštartovanie animácie a dokonca ani prvotné overenie toho, či prehliadač podporuje verziu pre javascript, alebo sa použije CSS3 verzia animácie, ale budiš.

Ak nepoznáte funkciu .animate(), tak si ju trošku osviežme, alebo s o nej čo-to povedzme. Vlastnosti sú nasledovné.

.animate( vlastnosti [, dĺžka travnia] [, animácia] [, dokončenie animácie] )

Pre príklad použitia si môžeme spraviť jeden div - najlepšie taký, čo potom aj využijeme. Volajme ho BANNER -

. Prostredníctvom funkcie animate pridáme vlastnosti a určíme, ako dlho sa animácia má vykonávať.

$('#banner').animate({
width: '468', // nastavíme šírku na 468 px
height: '60', // nastavíme výšku na 60 px

// animácia bude trvať 3 sekundy
} , 3000, function() {
 // tu je animácia dokončená...
});

Ako by sme animovali takúto vec pomocou CSS3?
Aby sme si uvedomili, čo sme vôbec robili, tak si povedzme, že ide o tzv. resize elementu. Z toho dôvodu aj nasledovný kód, ktorý si vysvetlíme.

@keyframes resize {
	0% {
		width: 0;
                height: 0;
	}
	50% {
		width: 60px;
		height: 468px;
		background-color:rgba(255,0,0,0.2);
	}
	100% {
		width: 468px;
		height: 60px;
		background-color:rgba(255,0,0,0.9);
	}
}

#banner {
	animation-name: resize;
	animation-duration: 1s;
	animation-iteration-count: 4;
	animation-direction: alternate;
	animation-timing-function: ease-in-out;
}

Hneď v úvode máte možnosť vidieť @keyframes resize. Čo nám to hovorí? Áno ak myslíte na určovanie kľúčových snímok. Ako máte možnosť vidieť, nazvali sme celú tú kľúčovaciu animáciu ako "resize". Je to veľmi dôležité vedieť, nakoľko sa na tú animáciu budeme odkazovať pri určení elementu, na ktorý chceme animáciu použiť. Presnejšie hovorím o deklarácii: animation-name: resize;. Ako vidíte, to "resize" môže byť nahradené čímkoľvek, podľa toho, ako si animáciu nazvete.

Ako rozpohybovať texty?

Ako vidíte vo vyššie uvedenom zápise @keyframes, určujú sa tam percentuálne hodnoty. Ide o vyjadrenie pozície animácie. Ak si vezmeme, že určujeme dĺžku animácie v milisekundách, alebo v sekundách, pri animácii trvajúcej 5 sekúnd, je 50% zápis presne 2.5 sekundy. Matematiku zvládneme všetci, takže myslím, že objasňovať ju netreba. Skôr si poďme povedať o pár základných veciach, ktoré už poznáme z iných CSS zápisov. Aby prehliadače vedeli, o čo ide, musíme používať aj zápis typu @-moz-keyframes, @-webkit-... @-ms-... či @-o- (pre operu). Pre reálny príklad si poďme spraviť jednduchú animáciu textu, kde potrebujeme, aby sa text zväčšil a spravil fade-in. Ako by sme to zapísali?

@keyframes text {
    0% {
      font-size: 20px;
      top: 10px;
      opacity: 0;
    }
    15% {
      font-size: 26px;
      opacity: 1;
      top: 6px;
    }
    75% {
      font-size: 26px;
      opacity: 1;
      top: 6px;
    }
    100% {
      font-size: 20px;
      opacity: 0;
      top: 10px;
    }
}

Ako vidíte, je to opäť len @keyframes bez @-moz- či @-webkit-. Nakoľko natívny spôsob:

@-moz-keyframes text,
@-webkit-keyframes text,
@keyframes text

NEFUNGUJE, je nutné, aby sa vyššie uvedený zápis zopakoval pre každú entitu. Ako môžete vidieť, zápis v keyframes určuje, že na začiatku bude text s nulovou opacitou, bude mať 20 pixelov. V 15% sa text zväčší na 26 pixelov a zviditeľní sa (opacita 100%). Následne tak bude až do 75%, kedy sa do 100% opäť vráti do pôvodných rozmerov a vlastností ako tomu bolo na začiatku. Aby sme našu animáciu spustili, potrebujeme určiť element, na ktorý bude animácia aplikovaná.

#banner p {
	animation-name: text;
	animation-duration: 5s;
	animation-iteration-count: infinite;
	animation-direction: alternate;
	animation-timing-function: ease-in-out;
	-moz-animation-name: text;
	-moz-animation-duration: 5s;
	-moz-animation-iteration-count: infinite;
	-moz-animation-direction: alternate;
	-moz-animation-timing-function: ease-in-out;
	-webkit-animation-name: text;
	-webkit-animation-duration: 5s;
	-webkit-animation-iteration-count: infinite;
	-webkit-animation-direction: alternate;
	-webkit-animation-timing-function: ease-in-out;
}

Spojme si to dokopy

Súbor na ukážkuPripravil som pre Vás jedno skúšobné html, pomocou ktorého si môžete pozrieť funkčnosť toho, čo je písané v tomto článku.