CSS Animace od Základů — Co Musíte Vědět
Naučte se psát hladké animace bez JavaScriptu. Zahrnuje @keyframes, timing-functions a praktické příklady.
Čtěte článekAnimace se Smyslem — Timing a Easing
Proč se některé animace cítí přirozené a jiné divně? Vše je o správném timingu a funkci easing. Včetně interaktivního příkladu.
Začneme u základů
Animace není jen o pohybu. Když se něco posouvá ze strany na stranu, není to stejné, jestli to trvá 100 milisekund nebo jednu vteřinu. A není to stejné, jestli se zrychluje rovnoměrně nebo začíná pomalu a pak se rozjíždí. To jsou věci, které ovlivňují, jak se animace cítí — a to je právě o čem mluvíme, když řekneme timing a easing.
Správné nastavení těchto vlastností dělá rozdíl mezi animací, která vypadá přirozeně a plyule, a animací, která se zdá divně a roboticky. Dobrá zpráva? Není to složité se to naučit. Stačí pár principů a pak budete vědět, co dělat.
Co je Timing?
Timing je jednoduše — jak dlouho animace trvá. To je všechno. Když nastavíte animaci na 300 milisekund, je to třetina sekundy. Když ji nastavíte na 2 sekundy, bude to dvakrát delší.
Ale není to tak jednoduché, jak to zní. Různé věci potřebují různě dlouhé časy. Když se tlačítko změní na hover, mělo by to být rychlé — někde kolem 200-300ms. Ale když se otevírá modal nebo se stránka posouvá, 400-600ms je lepší. Dává to mozku čas registrovat, co se děje, bez toho, aby to bylo nudné.
Důležitá čísla si pamatujte: Pod 100ms vypadá okamžitě. Mezi 200-400ms se cítí odpovídavě. Nad jednu sekundu se cítí pomalu. Zkuste si to sami — napište tři CSS animace s různými durациonikami a podívejte se, jak se cítí rozdílně.
Easing — Jak se Animace Zrychluje a Zpomaluje
Easing je zajímavější část. To je funkce, která říká: „Začni pomalu, pak se rozjeď, pak se zpomal na konci.” Nebo: „Skoč na začátku, pak se usaď.” Nebo: „Jdi rovnoměrně, bez zrychlení.”
V CSS to vidíte v
animation-timing-function
nebo
transition-timing-function
. Nejčastěji se používají tyto:
ease-out:
Začíná rychle, pak se zpomaluje. Ideální pro prvky, které se objevují nebo migrují dovnitř.
ease-in:
Začíná pomalu, pak se zrychluje. Používáte ji, když se něco skrývá nebo mizí.
ease-in-out:
Pomalu začne, zrychlí se v půli, pak se zpomalí. Nejpřirozeněji vypadající.
linear:
Stejná rychlost od začátku do konce. Někdy se hodí, ale často vypadá roboticky.
Jak To Dát Dohromady
Kombinujete timing a easing. Máte tlačítko, které chcete animovat na hover? Zkuste
transition: all 300ms ease-out
. To je 300 milisekund s ease-out funkčností. Zkuste si to a podívejte se, jak se cítí. Pak zkuste 200ms. Pak zkuste ease-in-out. Rozdíl není obrovský, ale je znát.
Klíč je — nedělejte si z toho vědu. Zkuste něco, spusťte si to v prohlížeči, podívejte se, jak to vypadá. Pokud se to cítí příliš rychle, zvyšte dobu. Pokud se to cítí divně, zkuste jinou easing funkci. Zhruba 80 procent případů se vám bude líbit ease-in-out s dobou mezi 250-400ms.
Rychlá rada: Nikdy nepoužívejte linear pro UI prvky. Vždy vypadají roboticky. ease-out je nejlepší pro otevírání věcí, ease-in-out pro všechno ostatní.
Důležitá Poznámka
Tento článek poskytuje informace o animacích a easing funkcích pro účely vzdělávání. Hodnoty a doporučení v tomto obsahu jsou založeny na obecných osvědčených postupech webového designu. Výkon animací se liší podle zařízení, prohlížeče a konečného uživatele. Před nasazením na produkční web vždy otestujte animace na více zařízeních. Příliš dlouhé nebo komplexní animace mohou negativně ovlivnit výkon webu — měřte a optimalizujte podle skutečných dat.
Shrnutí
Timing a easing nejsou nic tajemného. Timing je prostě čas — nastavte si 300ms nebo 500ms. Easing je funkce, která mění, jak se animace chová — ease-out, ease-in-out, linear. Kombinujte je, zkušujte, vidíte, co se vám líbí.
Nejlepší animace jsou ty, které si jejich tvůrce vzal čas otestovat. Nezačínejte s komplikovanými kubickými bezierovými křivkami. Začněte se standartními easing funkcemi. Když to zvládnete, pak se můžete pustit do pokročilejších věcí. Ale upřímně řečeno — pro 90 procent případů vám stačí ease-in-out a někde 300ms. Zbytek je jen jemné dolaďování.
Více na Téma Animace
