Čo je Animácia na webe?

Definícia webovej animácie

Webová animácia je vizuálny pohybový efekt na webstránke, ktorý pridáva dynamiku a interaktivitu. Na rozdiel od statickej stránky, animácie vytvárajú plynulé prechody medzi stavmi, upozorňujú na dôležité prvky a poskytujú spätnú väzbu na akcie používateľa.

Počítačová animácia funguje tak, že obraz na obrazovke sa opakovane nahrádza novým, mierne posunutým obrazom — zvyčajne rýchlosťou 60 snímok za sekundu (60 FPS). Ľudské oko toto vníma ako plynulý pohyb.

Technológie webovej animácie

• CSS animácie a prechody — najjednoduchšia metóda. CSS transition pre jednoduché prechody (hover efekty, zmena farby), CSS @keyframes pre zložitejšie animácie
• JavaScript animačné knižnice — Motion (Framer Motion), GSAP, Anime.js — pre pokročilé, interaktívne animácie
• SVG animácie — animovanie vektorovej grafiky (ikony, ilustrácie, logá)
• Lottie — prehrávanie animácií vytvorených v Adobe After Effects na webe
• WebGL / Canvas — pre 3D grafiku a komplexné vizuálne efekty

Typy animácií na webe

• Micro-interakcie — jemné efekty ako hover na tlačidle, toggle prepínač, like animácia
• Loading animácie — skeleton screens, progress bary, spinnery počas načítania
• Scroll animácie — prvky sa objavujú, posúvajú alebo menia pri skrolovaní stránky
• Prechody medzi stránkami — plynulá animácia pri navigácii medzi podstránkami
• Vstupné animácie — prvky sa postupne objavujú (stagger, fade-in, slide-up)

Výkon a najlepšie praktiky

Animácie musia byť plynulé (60 FPS) a nesmú spomaľovať stránku. Animujte len vlastnosti transform a opacity — tie sú GPU-akcelerované. Vyhýbajte sa animovaniu width, height, top, left, pretože spúšťajú prepočet layoutu.