Proč používat CSS animace místo JavaScriptu?
V minulosti vývojáři pro rozpohybování webů hojně využívali JavaScript (např. knihovnu jQuery). S příchodem moderního CSS3 už to však není nutné. CSS animace využívající @keyframes jsou hardwarově akcelerované (zpracovává je grafická karta počítače nebo mobilu, nikoliv procesor). Díky tomu jsou naprosto plynulé (60 FPS), nezatěžují baterii mobilních telefonů a kód webu je mnohem čistší a rychlejší.
Jak pravidlo @keyframes funguje?
Pravidlo `@keyframes` definuje, jak by měl prvek vypadat v určitých fázích svého pohybu. Pomocí procent (od 0 % do 100 %) nebo klíčových slov (from, to) určujete počáteční a koncový stav. Prohlížeč pak automaticky a plynule dopočítá všechny kroky mezi nimi.
Příklad: Chcete-li prvek zprůhlednit, nastavíte na začátku 0% { opacity: 0; } a na konci 100% { opacity: 1; }. Prohlížeč vytvoří krásný efekt vynoření (Fade In).
Co znamená Fill-Mode (forwards)?
Pokud v našem generátoru nastavíte opakování pouze na 1x (tedy aby proběhla jen jednou po načtení stránky), přidáme do kódu automaticky parametr forwards. Ten zajistí, že po skončení animace prvek zůstane ve svém finálním stavu (např. viditelný). Bez tohoto parametru by animace proběhla a prvek by se vrátil do svého původního, neviditelného stavu.