DarslarWeb dasturlash

Animatsiya — @keyframes va animation

Transition'dan keyin keyingi bosqich: @keyframes orqali to'liq animatsiya yaratish. Loader, puls va hover'siz harakatlanuvchi elementlar.

35 daqiqa

CSS Advanced — Dars 10

Animatsiya — elementlar o'z-o'zidan harakatlansin

Transition hover bilan ishlaydi, animation esa o'z-o'zidan ham.

@keyframesanimationinfiniteease-in-out

Dars rejasi

4 ta mavzu

01Transition va Animation farqi
02@keyframes — animatsiya bosqichlari
03animation xossalari
04Amaliy misollar — loader, puls, zarracha

1. Transition va Animation farqi

Transition: 1 holatdan 2-holatga o'tish (A → B). Hover kabi voqea kerak.
Animation: bir necha holatdan o'tadi (A → B → C → A). O'z-o'zidan ishlaydi, qayta-qayta takrorlanishi mumkin.

2. @keyframes

@keyframes — animatsiya bosqichlari. from/to yoki foizlar bilan yoziladi.

1@keyframes bounce {
2  0%   { transform: translateY(0); }
3  50%  { transform: translateY(-30px); }
4  100% { transform: translateY(0); }
5}
6
7/* Yoki qisqa: */
8@keyframes fade {
9  from { opacity: 0; }
10  to   { opacity: 1; }
11}

3. animation xossalari

animation-name — @keyframes nomi.
animation-duration — davomiyligi (2s, 500ms).
animation-timing-function — egri chiziq (ease, linear, ease-in-out).
animation-delay — boshlanishidan oldingi kechikish.
animation-iteration-count — nechta marta (son yoki infinite).
animation-direction — yo'nalish (normal, reverse, alternate).

1/* Qisqa qilib bitta qatorda: */
2.top {
3  animation: bounce 1s ease-in-out infinite;
4}
5
6/* Alohida alohida: */
7.top2 {
8  animation-name: fade;
9  animation-duration: 2s;
10  animation-delay: 0.5s;
11  animation-iteration-count: infinite;
12  animation-direction: alternate;
13}

4. Amaliy misollar

Asosiy animatsiyalar

HTML

/* 1. Pulse */
  .pulse {
    width: 60px; height: 60px;
    background: #ef4444;
    border-radius: 50%;
    animation: pulse 1.5s ease-in-out infinite;
  }
  @keyframes pulse {
    0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.7); }
    50% { transform: scale(1.1); box-shadow: 0 0 0 20px rgba(239, 68, 68, 0); }
  }

/* 2. Bounce */
  .bounce {
    width: 60px; height: 60px;
    background: #fbbf24;
    border-radius: 12px;
    animation: bounce 1.2s ease-in-out infinite;
  }
  @keyframes bounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-30px); }
  }

/* 3. Spin */
  .spin {
    width: 50px; height: 50px;
    border: 5px solid rgba(255,255,255,0.2);
    border-top-color: #22c55e;
    border-radius: 50%;
    animation: spin 1s linear infinite;
  }
  @keyframes spin {
    to { transform: rotate(360deg); }
  }

/* 4. Gradient move */
  .grad {
    width: 120px; height: 60px;
    border-radius: 8px;
    background: linear-gradient(90deg, #ec4899, #8b5cf6, #3b82f6, #ec4899);
    background-size: 300% 100%;
    animation: slide 3s linear infinite;
  }
  @keyframes slide {
    0% { background-position: 0% 50%; }
    100% { background-position: 100% 50%; }
  }

/* 5. Shake */
  .shake {
    width: 60px; height: 60px;
    background: #06b6d4;
    border-radius: 8px;
    animation: shake 0.6s ease-in-out infinite;
  }
  @keyframes shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-6px); }
    75% { transform: translateX(6px); }
  }
</style>

<div class="row">
  <div class="item">
    <div class="pulse"></div>
    <div class="label">Pulse</div>
  </div>
  <div class="item">
    <div class="bounce"></div>
    <div class="label">Bounce</div>
  </div>
  <div class="item">
    <div class="spin"></div>
    <div class="label">Loader</div>
  </div>
  <div class="item">
    <div class="grad"></div>
    <div class="label">Gradient move</div>
  </div>
  <div class="item">
    <div class="shake"></div>
    <div class="label">Shake</div>
  </div>
</div>

Natijajonli

Loader spinner — batafsil

1.loader {
2  width: 50px;
3  height: 50px;
4  border: 5px solid #e5e7eb;
5  border-top-color: #2563eb;
6  border-radius: 50%;
7  animation: spin 1s linear infinite;
8}
9
10@keyframes spin {
11  to { transform: rotate(360deg); }
12}

Tugmaga hover animatsiya

Hover bilan animatsiya

HTML

Natijajonli

Kichik test

0 / 5

1.Animatsiya bosqichlarini yozish uchun qaysi CSS at-rule ishlatiladi?

2.Animatsiya cheksiz takrorlansin desangiz qaysi qiymat?

3.Loader (aylanayotgan doira) qanday harakat bilan yasaladi?

4.Transition va Animation o'rtasidagi ASOSIY farq?

5.Animatsiya toq ketsa oldinga, juft ketsa teskari bo'lishi uchun?

Mustaqil ish

0 / 6