CSS Animations

CSS Animations elementlarga murakkab va qayta-qayta bajariladigan harakatlar qo‘shish imkonini beradi. Bu orqali foydalanuvchilar uchun sayt yanada jonli va interaktiv bo‘lib ko‘rinadi.

Asosiy tushunchalar

1. @keyframes – animatsiyaning bosqichlarini belgilash.
2. animation-name – animatsiya nomi.
3. animation-duration – animatsiya qancha vaqt davom etadi.
4. animation-timing-function – tezlik egri chizig‘i.
5. animation-delay – animatsiya boshlanishidan oldin kutish.
6. animation-iteration-count – necha marta takrorlanishi.
7. animation-direction – yo‘nalishi (normal, reverse, alternate).
8. animation-fill-mode – animatsiya tugagandan keyingi holat.

1. Oddiy animatsiya

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
 
.box {
  width: 100px;
  height: 100px;
  background: steelblue;
  animation: fadeIn 2s ease-in-out;
}

Bu misolda .box elementi asta-sekin ko‘rinadigan bo‘ladi.

2. Infinite Loop Animatsiya

@keyframes pulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.2); }
  100% { transform: scale(1); }
}
 
.circle {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: crimson;
  animation: pulse 1.5s ease-in-out infinite;
}

Bu yerda .circle doimiy pulsatsiya qiladigan effektga ega bo‘ladi.

3. Delay va Fill Mode bilan

@keyframes slideIn {
  from { transform: translateX(-100%); }
  to { transform: translateX(0); }
}
 
.panel {
  width: 200px;
  height: 120px;
  background: lightgreen;
  animation: slideIn 1s ease-out 0.5s forwards;
}

• 0.5s delay bilan boshlanadi.
• forwards tufayli animatsiya tugagandan so‘ng panel oxirgi holatda qoladi.

4. Alternate Direction

@keyframes bounce {
  0%   { transform: translateY(0); }
  50%  { transform: translateY(-30px); }
  100% { transform: translateY(0); }
}
 
.ball {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: orange;
  animation: bounce 0.8s ease-in-out infinite alternate;
}

Bu animatsiya yuqoriga va pastga sakraydigan effekt yaratadi.

5. Bir nechta animatsiya qo‘shish

@keyframes rotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
 
@keyframes colorChange {
  0% { background: red; }
  50% { background: blue; }
  100% { background: red; }
}
 
.box {
  width: 120px;
  height: 120px;
  animation: rotate 3s linear infinite, colorChange 6s ease-in-out infinite;
}

Bu misolda .box bir vaqtning o‘zida aylanadi va rangi o‘zgaradi.

Amaliy maslahatlar

• Har doim transform va opacity asosidagi animatsiyalardan foydalaning, ular GPU optimizatsiyaga ega.
• Juda uzun animatsiyalar foydalanuvchini charchatishi mumkin.
• infinite ishlatayotganda foydalanuvchi UX ni hisobga oling.
• forwards bilan animatsiya tugagandan keyin elementni joyida qoldiring.

Yakuniy maslahat

CSS Animations — saytga jon kiritish uchun kuchli vosita. To‘g‘ri ishlatilsa, foydalanuvchilarni jalb qiladi va interfeysni ancha yoqimli qiladi.