Posledních pet let jsme animovali webove prvky pomoci jQuery — fadeIn, slideDown, animate. Fungovalo to, ale za cenu vykonu. Kazdy snimek animace vyzadoval prepocet layout a repaint v JavaScriptu. CSS3 prinasi transitions, transforms a animations, ktere presunuji animace do prohlizece — s hardwarovou akceleraci, plynulejsim vykonem a cistejsim kodem.
CSS3 Transitions¶
Transition je nejjednodussi zpusob, jak pridat animaci. Ríkáte prohlizeci: kdyz se tato vlastnost zmeni, animuj prechod. Staci ctyri vlastnosti — transition-property (co animovat), transition-duration (jak dlouho), transition-timing-function (krivka zrychleni) a transition-delay (zpozdeni). V praxi vetsinou pouzivame zkraceny zapis: transition: opacity 0.3s ease.
Transitions reagují na zmenu stavu — typicky :hover, :focus nebo pridani CSS tridy pres JavaScript. Kdyz uzivatel najede na tlacitko, barva pozadí se plynule zmeni. Kdyz otevrele dropdown menu, opacity se animuje z 0 na 1. Zadny JavaScript pro samotnou animaci — jen pridani tridy, a CSS se postara o zbytek.
Oproti jQuery animate je rozdil dramaticky. jQuery animuje tak, ze v kazdém snímku nastavi novy inline styl pres JavaScript. To znamena prepocet stylu, layout a paint pro kazdy snimek. CSS transition bezi v compositor vlakne prohlizece, casto s GPU akceleraci. Na mobilnich zarizenich je rozdil ve vykonostech obrovský — jQuery animace se sekaji, CSS transitions jsou plynule.
CSS3 Transforms¶
Transform umoznuje transformovat element bez ovlivneni layout — translate (posunuti), rotate (otoceni), scale (zmena velikosti) a skew (zkoseni). Klicove je, ze transform neovlivnuje okolni elementy. Kdyz element posunete pres translate, ostatni elementy zustavaji na svych mistech. To je zakladni rozdil oproti zmene margin nebo position.
Protoze transform nevyvolava layout recalculation, je idealni pro animace. Animace pomoci transform: translateX(100px) je vyrazne rychlejsi nez animace left: 100px. Prohlizec muze transform animovat na GPU jako kompozitni vrstvu, zatimco zmena left vynucuje prepocet layout celeho dokumentu.
3D transformace (translate3d, rotate3d, perspective) otviraji dalsi moznosti. Muzete vytvorit efekt otaceni karty, 3D karusel nebo paralaxni efekty. A dulezity trik — i kdyz nepotrebujete 3D, pridani transform: translateZ(0) vynutí vytvoreni kompozitni vrstvy a GPU akceleraci. Je to hack, ale funguje skvele pro zlepseni vykonu animaci.
CSS3 Animations¶
Zatimco transitions animuji prechod mezi dvema stavy, animations umoznuji definovat slozitejsi sekvence s vice kroky. Pomoci @keyframes definujete klicove snimky animace — od 0% do 100% s libovolnym poctem mezikroku. Pak animaci priradíte elementu pres vlastnost animation s parametry pro dobu trvani, pocet opakovani, smer a dalsi.
Typicke pouziti jsou loading spinnery, pulsujici notifikace, nekonecne rotace ikon nebo komplexni uvodni animace stranky. Na rozdíl od transitions, animations mohou bezet automaticky pri nacteni stranky, opakovat se v nekonecne smycce a byt pozastaveny pres animation-play-state.
Pro slozitejsi scenare kombinujeme animations s transitions. Uvodni animace stranky bezi pres @keyframes, interaktivní hover efekty pres transitions. JavaScript pouzivame jen pro pridavani a odebirani trid — samotna animace je vzdy v CSS. Toto rozdeleni zodpovednosti dela kod udrzovatelnejsim.
Vendor prefixy — nutne zlo¶
Nejmene oblibena cast CSS3 vyvoje jsou vendor prefixy. Kazdy prohlizec implementuje nove CSS vlastnosti s vlastnim prefixem — -webkit- pro Chrome a Safari, -moz- pro Firefox, -ms- pro IE, -o- pro Operu. To znamena, ze pro jednu transition musite napsat ctyri az pet radku. Je to únavné, ale nutné pro kompatibilitu.
Nastesti existuji nastroje. CSS preprocesory jako Sass a LESS umoznuji definovat mixiny, ktere automaticky generuji vsechny prefixy. A projekt jako Prefix Free od Lea Verou automaticky pridava prefixy v runtime pres JavaScript. Do budoucna se prefixy budou postupne odstranovavat, jak se specifikace stabilizuji.
Prakticke vzory animaci¶
Nejcastejsi animace v nasich projektech jsou hover efekty na tlačítkách (zmena barvy, stínu, mírne zvětšení pres scale), otevirání a zavirání menu (opacity + translateY), loading stavy (nekonecna rotace) a page transitions (fade in pri nacteni obsahu). Pro kazdý z techto vzoru mame v nasem CSS frameworku pripravene utility tridy.
Dulezity princip je strídmost. Animace mají slouzit uzivatelskemu rozhrani — davat zpetnou vazbu, naznacovat vztahy mezi elementy, smerovat pozornost. Prilis mnoho animaci rozptyluje a zpomaluje. Doporucujeme dodrzovat dobu trvani 200-300ms pro mikro-interakce a maximalne 500ms pro vetsi prechody. Timing function ease-out se pro většinu interakci citi nejprirozenejsi.
Performance — co merit a jak optimalizovat¶
Chrome DevTools maji skvely panel pro analyzu vykonu animaci. Tab Timeline ukazuje, kolik casu prohlizec stravi v jednotlivych fazich — Scripting, Rendering, Painting, Compositing. Idealni animace travi vetsinu casu v Compositing fazi, coz znamena GPU akceleraci. Pokud vidite hodne casu v Rendering a Painting, neco je spatne.
Pravidlo je jednoduche — animujte pouze transform a opacity. Tyto dve vlastnosti mohou byt animovany ciste na GPU bez ovlivneni layout. Animace width, height, margin, padding, top, left — vsechny tyto vlastnosti vynucuji prepocet layout a jsou vyrazne pomalejsi. Pokud potrebujete animovat velikost, pouzijte transform: scale misto width/height.
Na mobilnich zarizenich je vykon jeste dulezitejsi. Slabsi procesory a omezena pamet znamenaji, ze spatne optimalizovane animace doslova vybiji baterii. Testujte na skutecnych zarizenich, ne jen v deskoptovem prohlizeci. Chrome DevTools umí emulovat pomalejsi CPU, coz pomaha odhalit problemy.
Pristupnost animaci¶
Ne kazdy uzivatel chce animace. Nekteri lide trpí vestibularními poruchami a pohyblive elementy jim zpusobuji nevolnost. Media query prefers-reduced-motion (ktera brzy prijde do prohlizecích) umozni detekovat, ze uzivatel preferuje omezeny pohyb. Jiz dnes bychom meli navrhovat animace tak, aby nebyly essentialni pro pouziti aplikace — jsou to vylepseni, ne nutnost.
Zaver¶
CSS3 transitions, transforms a animations jsou budoucnost webovych animaci. Lepsi vykon diky GPU akceleraci, cistejsi oddeleni zodpovednosti (CSS pro animace, JS pro logiku) a nativni podpora v modernich prohlizecich. Zacnete nahrazovat jQuery animace CSS transitions jiz dnes — vasi uzivatele na mobilech vam podekuji.