Chapter 15 — CSS Animatsiyalari

---

15.1 @keyframes Asoslari

Example

styles.css
CSSNusxalash
01@keyframes fadeIn {
02  from { opacity: 0; }
03  to { opacity: 1; }
04}
05.element {
06  animation: fadeIn 0.5s ease-in;
07}

15.2 Bir Nechta Keyframe va animation Xususiyatlari

Example

styles.css
CSSNusxalash
01@keyframes bounce {
02  0%, 100% { transform: translateY(0); }
03  50% { transform: translateY(-20px); }
04}
05.ball {
06  animation: bounce 1s infinite ease-in-out;
07}

⚠️ Common Mistake
animation-iteration-count: infiniteni har qanday elementga beparvo qo'llash — bu foydalanuvchini charchatishi va performance muammosi tug'dirishi mumkin.

📝 Practice Exercises

🟢 Exercise 1 — Easy

Task: fadeIn animatsiyasini yarating va uni sahifa yuklanganda elementga qo'llang.

🟡 Exercise 2 — Medium

Task: Loading spinner yarating — @keyframes bilan rotate(0deg) dan rotate(360deg) gacha, infinite linear bilan.

🔴 Exercise 3 — Hard

Task: Notification "toast" animatsiyasi yarating — pastdan yuqoriga suzib chiqadi (translateY + opacity), 3 soniyadan keyin avtomatik yo'qoladi.

---

🐛 Debugging Challenge

styles.css
CSSNusxalash
01@keyframes slide {
02  from { left: 0; }
03  to { left: 100px; }
04}
05.box { animation: slide 1s; }

Your Task: Bu animatsiya ishlaydi, lekin sekin (jerky) ko'rinadi. Qanday yaxshilash mumkin?

<details> <summary>Solution</summary> `left` xususiyati Layout'ni qayta hisoblashga majburlaydi (reflow), bu sekin va "jerky" animatsiyaga olib kelishi mumkin. Yechim: `left` o'rniga `transform: translateX()` ishlatish — bu GPU-accelerated va silliqroq. </details>

---

📌 Chapter Summary

@keyframes animatsiyaning turli bosqichlarini belgilaydi (0%-100% yoki from-to). animation xususiyati orqali bu keyframe'lar elementga duration, iteration-count va boshqa parametrlar bilan qo'llaniladi.

🎯 Key Takeaways

• Performant animatsiyalar uchun transform/opacity afzal, left/top/width emas
• infinite faqat kerakli holatlarda (loading, dekorativ effekt) ishlatilsin
• Bir nechta foizli nuqta (masalan 0%, 50%, 100%) murakkab animatsiyalar uchun imkoniyat beradi

⚡ Quick Cheat Sheet

styles.css
CSSNusxalash
01@keyframes name {
02  0% { }
03  50% { }
04  100% { }
05}
06animation: name duration timing-function iteration-count direction;

---