28-dars

Transition va Animation o'rtasidagi farq

1. CSS Transition nima?

Transition — bu holatdan holatga o'tish.

👉 Biror CSS property o'zgarsa, brauzer uni asta-sekin o'zgartiradi.

Asosiy xususiyati:

• Trigger kerak (hover, class qo'shildi, focus, JS)
• Boshlanishi bor, oxiri bor
• Timeline yo'q

Misol:

.button {
  background: blue;
  transition: background 300ms ease;
}

.button:hover {
  background: red;
}

🧠 Bu yerda:

• Hover bo'ldi → property o'zgardi → transition ishga tushdi
• Hover yo'q → orqaga qaytadi

2. CSS Animation nima?

Animation — bu vaqt bo'yicha harakat.

👉 Holat o'zgarmasa ham, animation ishlayveradi.

Asosiy xususiyati:

• Keyframes bor
• Timeline bor
• Trigger shart emas
• Loop bo'lishi mumkin

Misol:

@keyframes spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

.loader {
  animation: spin 1s linear infinite;
}

🧠 Bu yerda:

• Hech narsa o'zgarmadi
• Element o'zi harakatda

3. Eng muhim farq (intervyu darajasida)

Holat	Transition	Animation
Trigger kerakmi	✅ Ha	❌ Yo'q
Timeline	❌ Yo'q	✅ Bor
Loop	❌ Yo'q	✅ Bor
Holatga bog'liq	✅ Ha	❌ Yo'q
UX micro-effect	✅ Eng yaxshi	❌ Ortiqcha

4. Qachon qaysini tanlash kerak?

✅ Transition ishlatiladi:

• Hover
• Focus
• Open / close
• Active state
• Button feedback

👉 Sabab: foydalanuvchi harakat qildi → javob qaytdi

✅ Animation ishlatiladi:

• Loader
• Skeleton
• Background effect
• Attention drawing

👉 Sabab: vaqt asosida ishlaydi

5. Qaysi CSS property'lar animatsiya qilinadi?

1️⃣ Brauzer CSS'ni qanday "harakatlantiradi"?

CSS animatsiya — bu brauzer pipeline ichida sodir bo'ladi.

Har bir property o'zgarishi 3 bosqichdan birini ishga tushiradi:

🔴 1. Layout (Reflow) — ENG OG'IR

Element o'lchami yoki joyi o'zgardi

Butun sahifa qayta hisoblanishi mumkin

🧠 Trigger qiladiganlar:

• width, height
• margin, padding
• top, left
• font-size

🟠 2. Paint — O'RTACHA

O'lcham o'zgarmaydi

Faqat ko'rinishi qayta chiziladi

🧠 Trigger qiladiganlar:

• background
• color
• box-shadow
• border-radius

🟢 3. Composite — ENG TEZ

GPU layer'lar joyini o'zgartiradi

Layout ham, paint ham yo'q

🧠 Trigger qiladiganlar:

• transform
• opacity

2️⃣ Animatsiya qilinadigan property'lar (toifalab)

❌ YOMON (Layout trigger qiladi)

width
height
top
left
margin
padding

⚠️ Animatsiya qilsang:

• FPS tushadi
• Scroll qotadi
• Telefon qiziydi 🔥

⚠️ O'RTACHA (Paint)

background-color
color
box-shadow
border-radius

👉 Kam, sekin, ehtiyot bilan

✅ ENG YAXSHI (Composite)

transform
opacity

👉 60fps 👉 GPU'da ishlaydi 👉 Smooth

3️⃣ Real hayot misoli

❌ Yomon variant:

.menu {
  width: 0;
  transition: width 300ms;
}

.menu.open {
  width: 300px;
}

🧠 Bu har frame'da layout qiladi.

✅ To'g'ri variant:

.menu {
  transform: translateX(-100%);
  transition: transform 300ms ease;
}

.menu.open {
  transform: translateX(0);
}

🧠 Faqat composite → tez 🔥

4️⃣ Nima uchun hamma property animatsiya qilinmaydi?

Sababi:

• Brauzer har frame qayta hisoblaydi
• 60fps = 16ms ichida hammasi bo'lishi kerak
• Layout bunga ulgura olmaydi