Interaktivní laboratoř animací – CSS Keyframes Playground

Tento projekt slouží jako praktická ukázka chování CSS animací pomocí @keyframes.
Studenti si zde mohou vyzkoušet různé typy animací — pohyb, rotaci, pulzování, miznutí, kývání, flipování a kombinované efekty.

Cílem projektu je pochopit rozdíl mezi:

• transition → reaguje na změnu stavu (např. :hover)
• @keyframes animací → běží samostatně v čase, bez nutnosti interakce

Projekt obsahuje tři úrovně obtížnosti:

1. Základní animace – fade, bounce
2. Pokročilé animace – rotace, pulzování
3. Mini galerie – více prvků, každý s jinou animací

Součástí HTML je přehledná struktura, kterou studenti snadno pochopí.
CSS existuje ve dvou verzích:

• hotová verze (vyplněné animace)
• studentská verze (kostra bez animací, které musí doplnit sami)

---

🧩 Struktura projektu

    index.html
    README.md
    styles-students.css
    styles.css

---

🚀 Jak projekt použít

1. Otevři soubory v libovolném editoru nebo na CodePen.io
2. Pro studijní účely použij studentskou verzi CSS
3. Postupuj podle zadání v komentářích
4. Experimentuj s různými hodnotami animation, @keyframes, transform, opacity atd.

---

🎯 Co si uživatel osvojí

• práci s animacemi pomocí @keyframes
• rozdíl mezi animací a transition
• transformace: scale, rotate, translate
• vizuální efekty: pulzování, kývání, flipování, miznutí
• tvorbu interaktivních a dynamických UI prvků
• kombinování více animací do jednoho efektu

---

🥼 Úrovně projektu

🥉 Úroveň 1 – Základní animace

• Fade-in-out
• Bounce (poskakování)

🥈 Úroveň 2 – Pokročilé animace

• Rotace
• Pulzování (změna velikosti + barvy)

🥇 Úroveň 3 – Mini galerie

Každá kartička má jinou animaci:

• posun
• rotace
• kývání
• flipování

💎 Bonus

• kombinovaná animace (scale + rotate + opacity + změna tvaru)

---

📜 Licence

Projekt je dostupný pod licencí MIT (viz soubor LICENSE).

---

✉️ Autor

Jakub Březa (Vlk samotář)
VlkSamotar.cz | Informatika | Trading | Elektrotechnika