Základy CSS Animací — Od Keyframes po Transitions
Naučte se rozdíl mezi transitions a keyframes. Pokrývá praktické příklady a běžné chyby, které dělají začátečníci.
Čtěte VíceObjevte jak pohyb a drobné interakce mění způsob, jakým uživatelé zažívají webové stránky. Průvodce od základů až k pokročilým technikám.
Web design dnes není jen o statických obrázcích. Je to o tom, jak se věci pohybují, reagují a komunikují s uživatelem. Kvalitní animace dělají rozdíl mezi nudným a pamětihodným zážitkem.
Podrobné průvodce, praktické tipy a příklady kódu pro implementaci pohybu v designu.
Naučte se rozdíl mezi transitions a keyframes. Pokrývá praktické příklady a běžné chyby, které dělají začátečníci.
Čtěte Více
Jak vytvořit drobné interakce, které zpětně vazbu uživateli a dělají rozhraní intuitivnějším. Nejde jen o efekty.
Čtěte Více
Animace vypadají skvěle, dokud se nezačnou zadrhávat. Seznamte se s GPU akcelerací a tím, co dělá animace pomalými.
Čtěte Více
Jak spouštět animace na základě polohy scrollování. Obsahuje kód i upozornění na to, co ne všichni uživatelé mohou vidět.
Čtěte VíceCo dělá animace příjemnou a účinnou — oproti těm, které jen rozptylují.
Animace by měla trvat mezi 200–500ms pro většinu interakcí. Příliš rychle a uživatel ji nevidí, příliš pomalu a cítí se to neresponsivně.
Uživatel by měl okamžitě vědět, že jeho akce byla zaregistrována. Tlačítko změní barvu, formulář se potvrdí — cokoli, co řekne „slyšel jsem tě”.
Animace by měla následovat fyzikální principy. Easing funkce jako ease-out a ease-in-out vypadají lépe než lineární pohyb.
Některé osoby mají citlivost na pohyb. Vždy zkontrolujte prefers-reduced-motion a poskytněte alternativu bez animací.
Vybírejte si mezi čistým CSS, JavaScriptem nebo hotovými knihovnami podle složitosti projektu.
Vestavěné, žádné závislosti. Nejlepší pro jednoduché, opakovující se animace. Hezky se čte v kódu.
Výkonná knihovna s přesným ovládáním. Vhodná pro složité sekvence a animace. Placená verze pro pokročilé.
Pro React projekty. Jednoduchá API, hezké přechody. Ideální pro moderní aplikace.
Hotové třídy pro běžné animace. Rychlé na implementaci, ale méně přizpůsobitelné.
3D animace a webGL. Pro speciální efekty a pokročilé vizuály. Má strmou křivku učení.
Spouštění animací při scrollování. Malá knihovna, snadná implementace bez psaní kódu.