CSS Animace od Základů — Co Musíte Vědět
Naučte se psát hladké animace bez JavaScriptu. Zahrnuje @keyframes, timing-function a praktické příklady.
Přečíst článekAnimace a Výkon — Jak Měřit a Optimalizovat
Webová stránka s animacemi může být pomalá nebo rychlá. Naučte se, jak testovat performance a optimalizovat bez kompromisů.
Proč se animace na webu zpomalují
Animace jsou nádherné. Dávají webu život a interaktivitu. Ale tady je ten háček — když jste neostelní, můžou vás připravit o uživatele. Rozumíme si — postavili jste hezkou stránku s plynulými přechody, a pak ji otestujete na telefonech a uživatelé si stěžují, že se všechno zasekává.
To není vaše chyba, jenom to nikdo neučí. Animace spotřebovávají energii procesoru. Každý snímek (frame) se musí vyrenderovat a zobrazit. Když se to děje moc rychle nebo moc složitě, zařízení nestíhá a uživatelé vidí, že se vše „trhá”.
Věc je v tom, že dobré animace nemusí být pomalé. Jen musíte vědět, na co se dívat a jak to měřit.
Metriky, které musíte sledovat
Není možné optimalizovat, co neměříte. Existují tři klíčové metriky, na které se zaměřit.
FPS (snímky za sekundu)
Cíl: 60 FPS. To znamená 60 snímků za sekundu — takže každý snímek má zhruba 16,7 milisekund. Na mobilech s 120Hz displejem je to 120 FPS. Když padnete pod 30 FPS, uživatelé to vidí jako trhanou animaci.
Paint Time
Čas, který prohlížeč potřebuje k překreslení prvku. Nižší je lepší. Když je to nad 16ms na jednu animaci, začíná se to zpomalovat. Animace přechodů, transformací a opacit jsou nejrychlejší.
Memory Usage
Paměť, kterou animace spotřebují. Na mobilech s menší RAM se může stát, že prohlížeč chybou zkolabuje. Dlouhé animace bez čištění keyframe mohou paměť zatěžovat.
Jak optimalizovat animace v praxi
Tady to začíná být zajímavé. Existuje několik triků, které vám pomohou vyrobit rychlé animace bez vzdání se jejich krásy.
1. Používejte transform a opacity
Animace pozice (left, top) a velikosti (width, height) jsou pomalé. Prohlížeč musí znovu spočítat layout. Místo toho animujte transform a opacity — to je téměř zdarma. Transform je čisté 3D, opacity je jen vrstva.
2. will-change — ale opatrně
CSS vlastnost will-change říká prohlížeči „připrav se, tohle se bude animovat”. Ale používejte ji jen na prvky, které se skutečně budou animovat. Příliš mnoho will-change deklarací zase zpomaluje věci.
3. Zmenšete rozsah animace
Pokud animujete velký prvek (celý viewport), je to nákladné. Pokud animujete malou ikonku — to je v pohodě. Animujte jen to, co je vidět, a vypněte animace mimo obrazovku.
Nástroje pro měření výkonu
Už jste slyšeli o DevTools? Je čas se do nich podívat blíž. Všechny moderní prohlížeče mají vestavěné nástroje pro měření výkonu.
Chrome DevTools Performance
Otevřete DevTools (F12), jděte na Performance tab. Stiskněte Record, pak vyvolej animaci, a zastavte. Uvidíte graf všeho, co se stalo — FPS, memory, painting. Je to úžasné.
Lighthouse
Lighthouse je součást DevTools a běží automatickou analýzu vašeho webu. Dá vám skóre výkonu a konkrétní doporučení. Spusťte ho a sledujte, jak se zlepšujete.
WebPageTest
Webový nástroj, kde si vyberete zařízení a síť, a on vám simuluje reálné podmínky. Vidíte, jak se vaše animace chová na pomalém internetu nebo starém telefonu.
Motion API
Pokud používáte knihovny jako GSAP nebo Framer Motion, mají vestavěné nástroje pro debug animací. GSAP má Animation Inspector, který vám ukáže všechny aktivní animace.
Poznámka k obsahu
Informace v tomto článku jsou určeny pouze pro vzdělávací účely. Doporučujeme testovat veškeré animace v reálných zařízeních a sítích vaších uživatelů. Výkon se liší v závislosti na hardwaru, prohlížeči a verzi operačního systému. Vždy proveďte vlastní testování, než nasadíte animace do produkce.
Závěr: Animace bez viny na výkonu
Animace nejsou luxus — jsou součástí moderního webového designu. Ale jen když je děláte správně. Měřte, optimalizujte a testujte. Používejte DevTools, sledujte FPS, animujte transform a opacity. Neměňte layout během animace a vyvarujte se zbytečných will-change deklarací.
Uživatelé vaší stránky si zaslouží plynulý zážitek. A vy si zasloužíte pocit hrdosti, že jste to zvládli bez kompromisů. Začněte měřit dnes — budete překvapeni, jak moc se to dá zlepšit.
Související články
