5.2-dars: Animatsiyalar

transition — silliq o'zgarish

Animatsiyalarsiz internet — amortizatorsiz mashina kabi. Hammasi qattiq, silkinib, noqulay. transition — interfeysni silliq qilishning eng oddiy usulidir.

Elementning xususiyatini o'zgartirganingda (masalan, sichqoncha olib borilganda rangni), brauzer uni bir zumda almashtiradi. Transition esa: «Hoy, buni 0.3 soniyada silliq qil», deydi.

.button {
  background: #e94560;
  transition: background 0.3s ease;
}

.button:hover {
  background: #10b981;
}

Mana bu qanday ko'rinadi. Kvadratchalarga sichqonchani olib bor — ular silliq o'zgaradi:

transitionning sintaksisi:

/* To'liq sintaksis */
transition: property duration timing-function delay;

/* Misollar */
transition: all 0.3s ease;              /* hammasi, 0.3s, silliq */
transition: transform 0.2s ease-out;    /* faqat transform, 0.2s */
transition: opacity 0.5s ease 0.1s;     /* opacity, 0.5s, 0.1s kechikish bilan */
transition: background 0.3s, transform 0.2s; /* bir nechta xususiyat */

/* Alohida xususiyatlar */
transition-property: transform;
transition-duration: 0.3s;
transition-timing-function: ease;
transition-delay: 0s;

Parametrlar batafsil:

• property — qaysi xususiyatni animatsiya qilish kerak. all — hammasi, yoki aniq bittasi: opacity, transform, background, color va h.k.
• duration — davomiylik. 0.3s (soniya) yoki 300ms (millisoniya). 0.2-0.3s — interfeyslar uchun standart.
• timing-function — tezlik aynan qanday o'zgaradi. ease (silliq), linear (bir tekis), ease-in (tezlashuv bilan), ease-out (sekinlashuv bilan), ease-in-out (tezlashuv va sekinlashuv).
• delay — boshlanishdan oldingi kechikish. Majburiy bo'lmagan parametr.

transform — transformatsiya

transform — element shakli, o'lchami va holatini o'zgartiruvchi xususiyat. U (xuddi position: relative kabi) qo'shnilarga ta'sir qilmaydi va ajoyib animatsiya qilinadi.

transform'ning asosiy funksiyalari:

/* Masshtablash */
transform: scale(1.5);         /* 1.5 baravar kattalashtirish */
transform: scaleX(2);          /* gorizontal cho'zish */
transform: scaleY(0.5);        /* vertikal siqish */

/* Burish */
transform: rotate(45deg);      /* soat yo'nalishi bo'yicha 45 gradusga */
transform: rotate(-90deg);     /* soat yo'nalishiga teskari */

/* Siljish */
transform: translateX(30px);   /* 30px o'ngga */
transform: translateY(-20px);  /* 20px yuqoriga */
transform: translate(30px, -20px); /* X va Y bo'yicha */

/* Nishablash */
transform: skew(10deg);        /* 10 gradusga nishablash */
transform: skew(10deg, 5deg);  /* X va Y bo'yicha */

/* Kombinatsiya */
transform: scale(1.2) rotate(15deg) translateX(10px);

To'rtburchaklarga sichqonchani olib bor — har biri o'z transformatsiyasini animatsiya qiladi:

E'tibor ber: barcha transformatsiyalar silliq, chunki ularda transition: transform 0.3s bor. transform'ning o'zi — bir zumlik. Silliqlikni transition beradi.

Juda muhim: transform elementni oqimdan chiqarmaydi va qo'shnilarga ta'sir qilmaydi. Element vizual ravishda transformatsiya qilinadi, lekin uning joylashuvdagi o'rni o'zgarishsiz qoladi. Bu shuni bildiradiki, sichqoncha olib borilganda tugmani xavfsiz kattalashtirish mumkin — uning ostidagi matn siljimaydi.

:hover — sichqoncha olib borilganda

:hover — bu psevdoklass (biz ular bilan CSS'da allaqachon uchrashgan edik). U foydalanuvchi elementga sichqonchani olib borganda ishga tushadi. transition va transform bilan birgalikda :hover mo'jizalar yaratadi.

/* Bazaviy tugma */
.btn {
  background: #e94560;
  color: #fff;
  padding: 14px 36px;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

/* Sichqoncha olib borilgandagi xatti-harakat */
.btn:hover {
  transform: scale(1.05);
  box-shadow: 0 6px 20px rgba(233, 69, 96, 0.4);
}

/* Bosish effektini ham qilish mumkin */
.btn:active {
  transform: scale(0.97);
}

Mana sichqoncha olib borilganda va bosilganda effektga ega tugma. Sichqonchani olib borib, bosib ko'r:

:hover uchun effektlar misollari:

/* Kartochkani ko'tarish */
.card {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.card:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 28px rgba(0,0,0,0.15);
}

/* Fon rangini o'zgartirish */
.nav-link {
  transition: background 0.2s ease, color 0.2s ease;
}
.nav-link:hover {
  background: #f0f0f0;
  color: #e94560;
}

/* Havolani chizib qo'yish */
.link {
  text-decoration: none;
  position: relative;
}
.link::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 2px;
  background: #e94560;
  transition: width 0.3s ease;
}
.link:hover::after {
  width: 100%;
}

Oxirgi misol — havolaning chiroyli chizig'i. U sichqoncha olib borilganda chapdan o'ngga «chiqib» keladi. Bu oddiy text-decoration: underlinega qaraganda ancha qiziqarli ko'rinadi.

Yuqoridagi kartochkalarda transition: transform 0.3s, box-shadow 0.3s bor. Sichqoncha olib borilganda ular 8px yuqoriga ko'tariladi (translateY(-8px)) va kattaroq soya oladi. Bu zamonaviy interfeyslardagi kartochkalar uchun standart pattern.

@keyframes — murakkab animatsiya

transition oddiy effektlar uchun yaxshi (A nuqtadan B nuqtaga). Lekin bir nechta bosqichli murakkab animatsiya kerak bo'lsa-chi? Masalan, element avval kichraysin, keyin kattalashsin, keyin rangini o'zgartirsin va chetga ketsin. Buning uchun @keyframes bor.

@keyframes myAnimation {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.2);
    opacity: 0.6;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

@keyframes kadrlar (frames) ketma-ketligini belgilaydi. 0% — animatsiyaning boshlanishi, 100% — oxiri. Ular orasiga oraliq nuqtalar qo'shish mumkin: 25%, 50%, 75%.

Bu yerda nima sodir bo'lmoqda:

• bounce: element yuqori-past sakraydi. Boshlanishi — pastda (translateY: 0), oxiri — yuqorida (translateY: -20px). alternate animatsiya u yoqdan-bu yoqqa borishini bildiradi.
• pulse: element pulsatsiya qiladi — kattalashadi va kichrayadi. 50% kadr — maksimal kattalashish.
• spin: cheksiz aylanish. 0 dan 360 gradusgacha.

Mana ularning keyframes'i kodda qanday ko'rinishi:

/* Sakrash */
@keyframes bounce {
  0%   { transform: translateY(0); }
  100% { transform: translateY(-20px); }
}

/* Pulsatsiya */
@keyframes pulse {
  0%, 100% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.1);
    opacity: 0.7;
  }
}

/* Aylanish */
@keyframes spin {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* Chapdan paydo bo'lish */
@keyframes slideIn {
  0%   { transform: translateX(-100px); opacity: 0; }
  100% { transform: translateX(0); opacity: 1; }
}

Yana bir foydali usul — sahifadagi elementning paydo bo'lish animatsiyasi. Foydalanuvchi sahifani ochgan zahoti, elementlar silliq chiqib kelishi yoki paydo bo'lishi mumkin. Bu entry animation deb ataladi:

Foydalanuvchi harakati bilan ishga tushadigan :hoverdan farqli o'laroq, @keyframes avtomatik ravishda — sahifa yuklanganda, kechikish bilan yoki JavaScript orqali trigger bo'yicha ishga tushishi mumkin.

animation — animatsiyani qo'llash

Sen @keyframes yaratding — ajoyib. Endi ularni elementga qo'llash kerak. Buning uchun animation xususiyati bor.

.element {
  animation: spin 1.5s linear infinite;
}

/* To'liq sintaksis */
animation: name duration timing-function delay iteration-count direction fill-mode play-state;

/* Misollar */
animation: bounce 0.6s ease infinite alternate;
animation: pulse 1s ease-in-out infinite;
animation: slideIn 0.5s ease-out 0.2s both; /* 0.2s kechikish bilan */
animation: spin 2s linear infinite, pulse 1s ease infinite; /* ikkita animatsiya */

animationning parametrlari batafsil:

direction: normal — 0%dan 100%gacha, reverse — 100%dan 0%gacha, alternate — u yoqdan-bu yoqqa, alternate-reverse — bu yoqdan-u yoqqa.

fill-mode: animatsiyadan oldin va keyin nima qilish kerak. forwards — oxirgi kadrda qolish, backwards — boshlanishdan oldin ham birinchi kadrdan boshlash, both — ikkalasi ham. both entry-animatsiyalar uchun qulay: element animatsiyagacha ko'rsatilmaydi, keyin silliq paydo bo'ladi va o'z joyida qoladi.

Eng ko'p uchraydigan kombinatsiyalar:

/* Cheksiz aylanish (loader) */
.loader {
  animation: spin 1s linear infinite;
}

/* Pulsatsiya qiluvchi tugma */
.btn-pulse {
  animation: pulse 1.5s ease infinite;
}

/* Yuklanishda elementning paydo bo'lishi */
.fade-in {
  animation: slideIn 0.5s ease-out both;
}

/* Ro'yxat uchun kechikishli animatsiya */
.item:nth-child(1) { animation: slideIn 0.3s ease-out 0s both; }
.item:nth-child(2) { animation: slideIn 0.3s ease-out 0.1s both; }
.item:nth-child(3) { animation: slideIn 0.3s ease-out 0.2s both; }

Oxirgi usul — ro'yxatning har bir elementi uchun kechikish. Bu «to'lqin» effektini yaratadi: elementlar birin-ketin paydo bo'ladi. Juda ta'sirli ko'rinadi.

Amaliyot: sichqoncha olib borilganda kattalashadigan tugma, soyali kartochka

Keling, bir nechta animatsiyaga ega sahifa yasaymiz. Tugma sichqoncha olib borilganda o'sadi, kartochka ko'tariladi va soya oladi, pastda esa — cheksiz aylanadigan loader bo'ladi.

<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Amaliyotdagi animatsiyalar</title>
<style>
  *, *::before, *::after {
    box-sizing: border-box;
  }
  body {
    font-family: 'Segoe UI', system-ui, sans-serif;
    background: #f5f5f5;
    margin: 0;
    padding: 40px 20px;
    color: #333;
  }
  .container {
    max-width: 700px;
    margin: 0 auto;
  }
  h1 {
    text-align: center;
    margin-bottom: 40px;
    font-size: 2em;
  }
  h1 span {
    display: inline-block;
    animation: wave 0.6s ease infinite alternate;
    transform-origin: center bottom;
  }
  @keyframes wave {
    0% { transform: rotate(-5deg); }
    100% { transform: rotate(5deg); }
  }

  /* Tugma */
  .btn {
    display: inline-block;
    padding: 16px 40px;
    background: linear-gradient(135deg, #e94560, #c23152);
    color: #fff;
    border: none;
    border-radius: 12px;
    font-size: 1.1em;
    font-weight: 600;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.3s ease;
    margin-bottom: 40px;
  }
  .btn:hover {
    transform: scale(1.08);
    box-shadow: 0 8px 24px rgba(233,69,96,0.4);
    background: linear-gradient(135deg, #c23152, #a01d3a);
  }
  .btn:active {
    transform: scale(0.96);
  }

  /* Kartochka */
  .card {
    background: #fff;
    border-radius: 16px;
    padding: 32px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    margin-bottom: 40px;
  }
  .card:hover {
    transform: translateY(-8px);
    box-shadow: 0 16px 40px rgba(0,0,0,0.1);
  }
  .card h2 {
    margin: 0 0 8px;
    font-size: 1.4em;
  }
  .card p {
    color: #666;
    line-height: 1.6;
    margin: 0;
  }

  /* Paydo bo'ladigan ro'yxat */
  .items {
    list-style: none;
    padding: 0;
    margin: 0 0 40px;
  }
  .items li {
    background: #fff;
    padding: 16px 20px;
    border-radius: 10px;
    margin-bottom: 8px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.04);
    animation: fadeInUp 0.3s ease both;
  }
  .items li:nth-child(1) { animation-delay: 0s; }
  .items li:nth-child(2) { animation-delay: 0.1s; }
  .items li:nth-child(3) { animation-delay: 0.2s; }
  .items li:nth-child(4) { animation-delay: 0.3s; }
  .items li:nth-child(5) { animation-delay: 0.4s; }

  @keyframes fadeInUp {
    0% {
      opacity: 0;
      transform: translateY(20px);
    }
    100% {
      opacity: 1;
      transform: translateY(0);
    }
  }

  /* Loader */
  .loader {
    display: flex;
    gap: 8px;
    justify-content: center;
    margin-bottom: 40px;
  }
  .loader .dot {
    width: 16px;
    height: 16px;
    background: #e94560;
    border-radius: 50%;
    animation: dotBounce 0.6s ease infinite alternate;
  }
  .loader .dot:nth-child(2) { animation-delay: 0.2s; }
  .loader .dot:nth-child(3) { animation-delay: 0.4s; }

  @keyframes dotBounce {
    0% { transform: translateY(0); }
    100% { transform: translateY(-16px); background: #10b981; }
  }

  /* Skeleton (yuklanish taqlidi) */
  .skeleton {
    display: flex;
    gap: 16px;
    margin-bottom: 40px;
  }
  .skeleton .sk-item {
    flex: 1;
    height: 120px;
    background: linear-gradient(90deg, #e0e0e0 25%, #f5f5f5 50%, #e0e0e0 75%);
    background-size: 200% 100%;
    border-radius: 12px;
    animation: shimmer 1.5s ease infinite;
  }
  @keyframes shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
  }

  .center {
    text-align: center;
  }
</style>
</head>
<body>
  <div class="container">
    <h1>
      <span style="animation-delay:0s;">A</span>
      <span style="animation-delay:0.1s;">n</span>
      <span style="animation-delay:0.2s;">i</span>
      <span style="animation-delay:0.3s;">m</span>
      <span style="animation-delay:0.4s;">a</span>
      <span style="animation-delay:0.5s;">t</span>
      <span style="animation-delay:0.6s;">s</span>
      <span style="animation-delay:0.7s;">i</span>
      <span style="animation-delay:0.8s;">y</span>
      <span style="animation-delay:0.9s;">a</span>
    </h1>

    <div class="center">
      <button class="btn">✨ Meni ustimga olib bor</button>
    </div>

    <div class="card">
      <h2>📄 Soyali kartochka</h2>
      <p>Meni ustimga olib bor — men ko'tarilaman va soya kattalashadi. Bu interfeysni taktil va sezgir qiladigan «ko'tarilish» (elevation) effektidir. Yuqoridagi kartochkaga sichqonchani olib borib ko'r — u silliq ko'tariladi.</p>
    </div>

    <ul class="items">
      <li>📌 Birinchi band — darhol paydo bo'ladi</li>
      <li>📌 Ikkinchi band — 0.1s'dan keyin</li>
      <li>📌 Uchinchi band — 0.2s'dan keyin</li>
      <li>📌 To'rtinchi band — 0.3s'dan keyin</li>
      <li>📌 Beshinchi band — 0.4s'dan keyin</li>
    </ul>

    <div class="loader">
      <div class="dot"></div>
      <div class="dot"></div>
      <div class="dot"></div>
    </div>

    <div class="skeleton">
      <div class="sk-item"></div>
      <div class="sk-item"></div>
      <div class="sk-item"></div>
    </div>
  </div>
</body>
</html>

Har bir animatsiyani ko'rib chiqamiz:

• Sarlavha: har bir harf kechikish bilan tebranadi (rotate(-5deg) → rotate(5deg)). To'lqin hosil qiladi.
• Tugma: transform va box-shadowda transition. Sichqoncha olib borilganda 1.08 baravar, bosilganda esa 0.96 baravar masshtablanadi. Silliq.
• Kartochka: transform va box-shadowda transition. Sichqoncha olib borilganda 8px ko'tariladi va soya kattalashadi.
• Ro'yxat: har bir band uchun turli kechikishlarga ega @keyframes fadeInUp. «To'lqin» effekti.
• Loader: uchta nuqta kechikishlar bilan sakraydi. Oddiy va chiroyli yuklanish indikatori.
• Skeleton: kontent yuklanishining taqlidi. Gradient u yoqdan-bu yoqqa «yurib», milt-milt qilish effektini yaratadi.

Keling, xulosa qilaylik. Mana animatsiyalar bo'yicha shpargalka:

/* ANIMATSIYALAR — SHPARGALKA */

/* 1. Silliq o'zgarish (transition) */
.element {
  transition: property 0.3s ease;
}
.element:hover {
  transform: scale(1.1);
  background: #10b981;
}

/* 2. Transformatsiyalar (transform) */
transform: scale(1.2);         /* kattalashtirish */
transform: rotate(45deg);      /* burish */
transform: translate(10px, 20px); /* siljish */
transform: skew(5deg);         /* nishablash */
transform: scale(1.1) rotate(10deg); /* kombo */

/* 3. Murakkab animatsiya (@keyframes) */
@keyframes myAnim {
  0%   { opacity: 0; transform: translateY(20px); }
  50%  { opacity: 0.5; transform: translateY(-10px); }
  100% { opacity: 1; transform: translateY(0); }
}

/* 4. Animatsiyani qo'llash (animation) */
.element {
  animation: myAnim 0.5s ease-out both;
  /* yoki qisqaroq */
  animation: pulse 1.5s ease infinite;
}

/* 5. Ko'p ishlatiladigan usullar */
/* Kartochkani hover'da ko'tarish */
.card { transition: transform 0.3s, box-shadow 0.3s; }
.card:hover { transform: translateY(-6px); box-shadow: 0 8px 24px rgba(0,0,0,0.1); }

/* Elementlarning navbat bilan paydo bo'lishi */
.item:nth-child(1) { animation-delay: 0s; }
.item:nth-child(2) { animation-delay: 0.1s; }
.item:nth-child(3) { animation-delay: 0.2s; }

/* Cheksiz loader */
@keyframes spin { 100% { transform: rotate(360deg); } }
.loader { animation: spin 1s linear infinite; }

Yodda tutish kerak bo'lgan asosiylari:

• transition — oddiy hover-effektlar uchun (A dan B ga)
• transform — shakl/o'lcham/holatni o'zgartirish (samarali)
• :hover + transition + transform — zamonaviy interfeyslar asosi
• @keyframes — murakkab ko'p bosqichli animatsiyalar uchun
• animation — keyframes'ni elementga qo'llaydi
• transform va opacityni animatsiya qil — ular eng tezkori
• Haddan oshirma: animatsiyalar sezilmas va taktil bo'lishi kerak, chalg'ituvchi emas

Animatsiyalar interfeysni jonli va sezgir qiladi. Foydalanuvchi sayt uning harakatlariga javob berayotganini his qiladi — bu foydalanishdan zavq olishni oshiradi. Keyingi darsda biz adaptivlikni ko'rib chiqamiz — barcha qurilmalarda bir xil chiroyli ko'rinadigan saytlarni qanday yasash haqida.