Chapter 13 — CSS Transitions

---

13.1 transition Xususiyatlari

Example

styles.css
CSSNusxalash
01.button {
02  background: blue;
03  transition: background-color 0.3s ease-in-out;
04}
05.button:hover { background: darkblue; }

13.2 Timing Function va Delay

Example

styles.css
CSSNusxalash
01.card {
02  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) 0.1s;
03}

⚠️ Common Mistake
transitionni faqat :hoverga qo'yib, asl holatga qaytishda animatsiya yo'qligini payqamaslik — transition ikkala yo'nalishda (kirish va chiqish) ham qo'llanishi kerak.

📝 Practice Exercises

🟢 Exercise 1 — Easy

Task: Tugmaning fon rangi hover'da 0.3 soniyada silliq o'zgaradigan qilib sozlang.

🟡 Exercise 2 — Medium

Task: Kartaga hover'da box-shadow va transform: scale() bir vaqtda silliq o'zgaradigan transition qo'shing.

🔴 Exercise 3 — Hard

Task: Dropdown menyu yarating — opacity va transform: translateY() orqali ochilish/yopilish animatsiyasi bilan, turli transition-delay qiymatlari bilan tajriba qiling.

---

🐛 Debugging Challenge

styles.css
CSSNusxalash
01.box:hover { transform: scale(1.1); transition: transform 0.3s; }

Your Task: Hover'dan chiqqanda (mouse leave) elementning asl holatga qaytishi silliq emas, sakrab qaytmoqda. Nega?

<details> <summary>Solution</summary> `transition` faqat `:hover` selektor ICHIDA yozilgan — bu faqat hover HOLATIGA kirishda ishlaydi. Yechim: `transition`ni asosiy (`.box`) selektorga ko'chirish, shunda u ikkala yo'nalishda (kirish va chiqish) ham qo'llanadi. </details>

---

📌 Chapter Summary

transition — property, duration, timing-function, delay to'rtta qismdan iborat. Transition asosiy selektorga (hover ichiga emas) yozilishi kerak, shunda ikkala yo'nalishda ham silliq ishlaydi.

🎯 Key Takeaways

• transitionni har doim ASOSIY selektorga yozing, :hover ichiga emas
• Aniq xususiyat nomini ko'rsatish alldan yaxshiroq
• Timing function tanlash animatsiyaning "his qilinishi"ga katta ta'sir qiladi

⚡ Quick Cheat Sheet

styles.css
CSSNusxalash
01transition: property duration timing-function delay;
02transition: background-color 0.3s ease-in-out;

---