CSS3 transformace a animace — konec jQuery animate

Posledních pet let jsme animovali webove prvky pomoci jQuery — fadeIn, slideDown, animate. Fungovalo to, ale za cenu vykonu. Kazdy snímek animace vyžadoval prepocet layout a repaint v JavaScriptu. CSS3 prinasi transitions, transforms a animations, které presunuji animace do prohlížeče — s hardwarovou akcelerací, plynulejsim výkonem a cistejsim kódem.

CSS3 Transitions¶

Transition je nejjednodušší zpusob, jak přidat animaci. Říkáte prohlížeči: kdyz se tato vlastnost zmeni, animuj prechod. Stačí ctyri vlastnosti — transition-property (co animovat), transition-duration (jak dlouho), transition-timing-function (křivka zrychlení) a transition-delay (zpoždění). V praxi většinou pouzivame zkrácený zápis: transition: opacity 0.3s ease.

Transitions reagují na změnu stavu — typicky :hover, :focus nebo přidání CSS třídy pres JavaScript. Kdyz uživatel najede na tlačítko, barva pozadí se plynule zmeni. Kdyz otevrele dropdown menu, opacity se animuje z 0 na 1. Žádný JavaScript pro samotnou animaci — jen přidání třídy, a CSS se postará o zbytek.

Oproti jQuery animate je rozdíl dramaticky. jQuery animuje tak, ze v kazdém snímku nastaví nový inline styl pres JavaScript. To znamená prepocet stylu, layout a paint pro kazdy snímek. CSS transition běží v compositor vlakne prohlížeče, často s GPU akcelerací. Na mobilních zařízeních je rozdíl ve vykonostech obrovský — jQuery animace se sekaji, CSS transitions jsou plynule.

CSS3 Transforms¶

Transform umožňuje transformovat element bez ovlivneni layout — translate (posunutí), rotate (otoceni), scale (zmena velikosti) a skew (zkoseni). Klíčové je, ze transform neovlivnuje okolni elementy. Kdyz element posunete pres translate, ostatní elementy zůstávají na svých místech. To je zakladni rozdíl oproti zmene margin nebo position.

Protože transform nevyvolava layout recalculation, je ideální pro animace. Animace pomoci transform: translateX(100px) je vyrazne rychlejsi nez animace left: 100px. Prohlížeč muze transform animovat na GPU jako kompozitní vrstvu, zatímco zmena left vynucuje prepocet layout celého dokumentu.

3D transformace (translate3d, rotate3d, perspective) otviraji další moznosti. Můžete vytvořit efekt otaceni karty, 3D karusel nebo paralaxni efekty. A důležitý trik — i kdyz nepotřebujete 3D, přidání transform: translateZ(0) vynutí vytvoření kompozitní vrstvy a GPU akcelerací. Je to hack, ale funguje skvele pro zlepšení vykonu animaci.

CSS3 Animations¶

Zatímco transitions animuji prechod mezi dvěma stavy, animations umožňují definovat složitější sekvence s více kroky. Pomoci @keyframes definujete klíčové snímky animace — od 0% do 100% s libovolnym počtem mezikroku. Pak animaci priradíte elementů pres vlastnost animation s parametry pro dobu trvání, počet opakování, směr a další.

Typicke použití jsou loading spinnery, pulsujici notifikace, nekonecne rotace ikon nebo komplexní úvodní animace stránky. Na rozdíl od transitions, animations mohou běžet automaticky pri načtení stránky, opakovat se v nekonecne smyčce a byt pozastaveny pres animation-play-state.

Pro složitější scénáře kombinujeme animations s transitions. Úvodní animace stránky běží pres @keyframes, interaktivní hover efekty pres transitions. JavaScript pouzivame jen pro přidávání a odebirani tříd — samotná animace je vždy v CSS. Toto rozdeleni zodpovednosti dělá kod udrzovatelnejsim.

Vendor prefixy — nutne zlo¶

Nejméně oblíbená cast CSS3 vývoje jsou vendor prefixy. Kazdy prohlížeč implementuje nove CSS vlastnosti s vlastním prefixem — -webkit- pro Chrome a Safari, -moz- pro Firefox, -ms- pro IE, -o- pro Operu. To znamená, ze pro jednu transition musíte napsat ctyri az pet radku. Je to únavné, ale nutné pro kompatibilitu.

Naštěstí existují nastroje. CSS preprocesory jako Sass a LESS umožňují definovat mixiny, které automaticky generují vsechny prefixy. A projekt jako Prefix Free od Lea Verou automaticky přidává prefixy v runtime pres JavaScript. Do budoucna se prefixy budou postupne odstranovavat, jak se specifikace stabilizuji.

Prakticke vzory animaci¶

Nejčastější animace v našich projektech jsou hover efekty na tlačítkách (zmena barvy, stínu, mírně zvětšení pres scale), otevírání a zavírání menu (opacity + translateY), loading stavy (nekonecna rotace) a page transitions (fade in pri načtení obsahu). Pro kazdý z těchto vzoru máme v našem CSS frameworku připravené utility třídy.

Důležitý princip je strídmost. Animace mají sloužit uzivatelskemu rozhrani — dávat zpětnou vazbu, naznacovat vztahy mezi elementy, smerovat pozornost. Příliš mnoho animaci rozptyluje a zpomaluje. Doporučujeme dodržovat dobu trvání 200-300ms pro mikro-interakce a maximálně 500ms pro větší přechody. Timing function ease-out se pro většinu interakci cítí nejpřirozenější.

Performance — co merit a jak optimalizovat¶

Chrome DevTools mají skvělý panel pro analýzu vykonu animaci. Tab Timeline ukazuje, kolik casu prohlížeč stráví v jednotlivých fázích — Scripting, Rendering, Painting, Compositing. Ideální animace tráví vetsinu casu v Compositing fazi, což znamená GPU akcelerací. Pokud vidíte hodně casu v Rendering a Painting, něco je spatne.

Pravidlo je jednoduché — animujte pouze transform a opacity. Tyto dvě vlastnosti mohou byt animovany ciste na GPU bez ovlivneni layout. Animace width, height, margin, padding, top, left — vsechny tyto vlastnosti vynucují prepocet layout a jsou vyrazne pomalejší. Pokud potřebujete animovat velikost, použijte transform: scale misto width/height.

Na mobilních zařízeních je vykon ještě důležitější. Slabší procesory a omezená paměť znamenají, ze spatne optimalizované animace doslova vybiji baterii. Testujte na skutečných zařízeních, ne jen v deskoptovem prohlížeči. Chrome DevTools umí emulovat pomalejší CPU, což pomáhá odhalit problemy.

Přístupnost animaci¶

Ne kazdy uživatel chce animace. Někteří lidé trpí vestibularními poruchami a pohyblive elementy jim způsobují nevolnost. Media query prefers-reduced-motion (která brzy přijde do prohlížečích) umožní detekovat, ze uživatel preferuje omezený pohyb. Již dnes bychom měli navrhovat animace tak, aby nebyly essentialni pro použití aplikace — jsou to vylepšení, ne nutnost.

Zaver¶

CSS3 transitions, transforms a animations jsou budoucnost webovych animaci. Lepsi vykon díky GPU akcelerací, čistější oddělení zodpovednosti (CSS pro animace, JS pro logiku) a nativni podpora v moderních prohlížečích. Zacnete nahrazovat jQuery animace CSS transitions již dnes — vasi uzivatele na mobilech vám poděkují.