Chapter 14 — Silliq O'zgarishlar va Animatsiya

---

14.1 Transition va Transform

Example

index.html
HTMLNusxalash
01<button class="bg-blue-500 hover:bg-blue-600 hover:scale-105 transition duration-200 ease-in-out px-6 py-3 rounded-lg text-white">
02  Bosing
03</button>

14.2 animate-pulse va animate-spin

Example

index.html
HTMLNusxalash
01<div class="animate-pulse bg-gray-200 h-4 w-full rounded"></div>

Real-world Usage

Bu — Facebook, LinkedIn kabi saytlarda keng qo'llaniladigan skeleton loading standarti.

⚠️ Common Mistake
animate-spinni juda katta elementga qo'llash — foydalanuvchini charchatishi mumkin, faqat kichik loading indikatorlar uchun mos.

📝 Practice Exercises

🟢 Exercise 1 — Easy

Task: Tugmaga hover:scale-105 transition duration-200 qo'shing.

🟡 Exercise 2 — Medium

Task: 3 qatorli skeleton loading yarating (animate-pulse bg-gray-200).

🔴 Exercise 3 — Hard

Task: "Zoom on hover" mahsulot kartasini to'liq yasang — rasm, sarlavha, narx, overflow-hidden group-hover:scale-110 bilan.

---

🔮 Predict the Output

index.html
HTMLNusxalash
01<div class="group relative overflow-hidden">
02  <img class="transition-transform duration-300 group-hover:scale-110">
03</div>

🧠 Think first! Rasm hover paytida qanday harakat qiladi va nega chegaradan chiqib ketmaydi?

<details> <summary>Answer</summary> Rasm asta-sekin (300ms) 10% kattalashadi, lekin `overflow-hidden` tashqi konteynerga qo'shilgani uchun rasmning ortiqcha qismi ko'rinmaydi — natijada "zoom ichkarida" effekti hosil bo'ladi. </details>

---

🐛 Debugging Challenge

index.html
HTMLNusxalash
01<button class="transition-colors hover:scale-105">Bosing</button>

Your Task: hover:scale-105 nega silliq ishlamayapti?

<details> <summary>Solution</summary> `transition-colors` faqat rang o'zgarishlariga silliqlik beradi, transform (scale) uchun emas. Yechim: `transition` (barchasiga) yoki `transition-transform` ishlatish kerak. </details>

---

📌 Chapter Summary

transition + duration-* — silliq o'zgarish uchun asosiy juftlik. hover:scale-105 — tugma va kartalarga eng ko'p ishlatiladigan mikro-animatsiya. animate-pulse — skeleton loading, animate-spin — loading spinner uchun sanoat standarti.

🎯 Key Takeaways

• transition-colors, transition-transform — aniq xususiyatga silliqlik berish tavsiya etiladi
• Skeleton loading final layoutni oldindan ko'rsatib, UX'ni yaxshilaydi
• Zoom-on-hover uchun overflow-hidden ota elementda shart

⚡ Quick Cheat Sheet

code.text
TEXTNusxalash
01Transition: transition, transition-colors, duration-*, ease-*
02Transform:  scale-*, rotate-*, translate-x/y-*
03Animatsiya: animate-spin, animate-pulse, animate-bounce

---