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.
Proč animace v CSS?
CSS animace jsou dnes nezbytnou součástí moderního webdesignu. Nejsou jen o tom, aby se stránka vypadala hezky — jde o to vytvořit zkušenost, která dává uživateli smysl. Když prvek zmizí bez přechodu, vypadá to divně. Když se objeví s plynulým efektem, uživatel to vníká jako přirozené a intuitivní.
Existují dva hlavní způsoby, jak animovat prvky v CSS. Transitions jsou pro jednoduché změny stavů. Keyframes umožňují složitější sekvence pohybu. Každá má svůj účel, a pokud je nepoužijete správně, budete mít problém — animace se budou zadrhávat, budou příliš rychlé nebo vůbec nebudou fungovat tak, jak chcete.
Transitions — Jednoduché přechody mezi stavy
Transition je nejjednodušší forma animace v CSS. Říkáte prohlížeči: „Když se změní tato vlastnost, změní se ji postupně, ne okamžitě.” Trvá to zpravidla od 200 milisekund do jedné sekundy.
Vezměte si tlačítko. Bez transition se barva změní okamžitě, když najedete myší. S transition se barva změní plynule během daného času. To je rozdíl mezi něčím, co vypadá jak web z roku 2005, a něčím, co vypadá moderně.
Základní syntaxe:
transition: property duration timing-function delay;
- property — jakou vlastnost animovat (background-color, opacity, transform)
- duration — jak dlouho (0.3s, 500ms)
- timing-function — jak se animace vyvíjí (ease, linear, ease-in-out)
- delay — zpoždění před spuštěním (volitelné)
Keyframes — Složitější animační sekvence
Keyframes vám umožňují definovat více kroků v animaci. Místo aby se prvek jen změnil z jednoho stavu do druhého, můžete mu říci: „V 0% bude tady, v 50% bude tady a v 100% bude tady.” To otevírá obrovské možnosti.
Keyframes se používají pro animace, které se opakují, nebo pro komplexnější pohyby. Třeba loading spinner, který se neustále otáčí. Nebo prvek, který se pohybuje po obrazovce po určité cestě. Bez keyframes bychom to mohli dělat jen s JavaScriptem, což by bylo pomalejší.
Základní struktura:
@keyframes animationName { 0% { … } 50% { … } 100% { … } }
Potom aplikujete animaci na prvek: animation: animationName 2s ease-in-out infinite;
Kdy používat co?
Transitions — pro změny stavů
- Hover efekty na tlačítka
- Zmizení/objevení prvků
- Změny barvy při interakci
- Rozšíření/stažení prvků
- Krátké přechody mezi stavy
Transitions jsou rychlé, jednoduché a ideální pro uživatelské interakce.
Keyframes — pro komplexní pohyby
- Rotující loadery a spinnery
- Pohyby po cestě (nejen přímé)
- Pulzující nebo blikající efekty
- Animace při načtení stránky
- Opakované pohyby a efekty
Keyframes jsou mocné, umožňují více kontroly a mohou běžet neustále nebo na příkaz.
Běžné chyby a jak je vyhnout
Příliš dlouhé animace
Animace, která trvá 3 sekundy, frustruje uživatele. Člověk čeká, jestli se něco stane. Udržujte transitions pod 0,5 sekundy a keyframes pod 2 sekundy. Výjimkou jsou opakující se animace, které mají být vidět — ty můžou být pomalejší, ale měly by být hypnotické, ne nudné.
Animace bez důvodu
Jen proto, že můžete animovat prvek, neznamená, že byste měli. Každá animace by měla mít účel — dát uživateli zpětnou vazbu nebo přesunout pozornost. Nadměrné animace dělají stránku matoucí a pomalejší.
Špatné timing funkce
Linear timing vypadá roboticky. Ease-in-out se cítí přirozeněji. Pro vstupní animace používejte ease-out (zpomaluje na konci), pro výstupní ease-in (zrychluje). Správná timing funkce dělá animaci o 100% lepší.
Animace, které zpomalují stránku
Animace opacity a transform jsou rychlé (GPU akcelerace). Animace width, height, left, top jsou pomalé (zpomalovací). Pokud máte problém s výkonem, kontrolujte, co animujete. Na mobilu je to ještě důležitější.
Praktické příklady na začátek
Tady jsou jednoduché příklady, které si můžete zkopírovat a začít používat hned. Nejsou to komplikované věci — jen základy, které fungují.
Hover efekt na tlačítko
.button {
background: #3b82f6;
transition: all 0.3s ease;
}
.button:hover {
background: #2563eb;
transform: translateY(-2px);
}
Tlačítko změní barvu a lehce se zdvihne. Prostě a efektivně.
Opacity fade-in
.element {
opacity: 0;
transition: opacity 0.5s ease;
}
.element.visible {
opacity: 1;
}
Prvek se postupně zobrazí. Ideální pro obsah, který se načítá.
Otáčející se spinner
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
.spinner {
animation: spin 2s linear infinite;
}
Klasický loading spinner. Linear timing, aby se otáčel rovnoměrně.
Shrnutí — Co si zapamatovat
Transitions jsou pro jednoduché přechody mezi stavy — když se uživatel podívá na prvek nebo s ním interaguje. Keyframes jsou pro složitější sekvence a opakující se animace. Oba jsou klíčové pro moderní webdesign.
Začněte jednoduše. Nemusíte vytvářet složité animace hned. I malé efekty — jemný fade-in, lehký zoom na hover — dělají rozdíl. Uživatelé to cítí a stránka se cítí kvalitněji. To je důvod, proč CSS animace existují a proč se vyplatí je naučit.
Příští krok? Experimentujte. Vezměte si běžné prvky — tlačítka, karty, nadpisy — a přidejte jim animace. Podívejte se, co funguje. Brzy budete mít instinkt, kdy a jak animovat. A až se dostanete do bodu, kdy vám transition nestačí, budete připraveni na keyframes.
“Animace není jen o tom, aby věci vypadaly hezky. Je to o komunikaci. Řeknete uživateli, co se právě stalo, a usnadníte mu porozumění vašemu webu.”
Chcete jít dál?
Nyní, když rozumíte základům, prozkoumejte pokročilejší techniky. Microinterakce, scroll animace a parallax efekty vám dají nové možnosti.
Čtěte o mikrointerakcíchPoznámka k výkonu
Všechny informace v tomto článku jsou určeny pro vzdělávací účely. Animace se chováním liší v různých prohlížečích a na různých zařízeních. Vždy testujte své animace na mobilních zařízeních a starších prohlížečích. GPU akcelerace není zaručena — vždy optimalizujte pro nejhorší případ. Pokud si nejste jistí, konzultujte dokumentaci MDN nebo Can I Use.
