Transition — property, duration, timing-function, delay

~20 daq · CSS · Animatsiya va Ilg'or mavzular

Muammodan boshlaylik

Tugmaga hover qo'shdingiz:

.btn { background: #2563eb; }
.btn:hover { background: #1d4ed8; }

Sichqoncha kelganda rang birdaniga almashadi — "lop" etib. Ishlaydi, lekin arzon ko'rinadi. Zamonaviy interfeyslarda holat o'zgarishi silliq: rang asta-sekin o'tadi, kartochka biroz ko'tariladi, menyu ochilganda yumshoq paydo bo'ladi.

Bitta qator — transition — har qanday holat o'zgarishini animatsiyaga aylantiradi.

Asosiy foydalanish

.btn {
  background: #2563eb;
  transition: background 200ms;
}

.btn:hover {
  background: #1d4ed8;
}

Endi rang 200 millisekund davomida silliq o'tadi — va sichqoncha ketganda xuddi shunday orqaga.

[!INFO] transition ni asosiy holatga yozing (.btn), :hover ga emas. Aks holda animatsiya faqat bir tomonga ishlaydi: hover ga kirishda silliq, chiqishda — birdaniga.

transition — o'zgarishni animatsiyalash, uning o'zi hech narsani o'zgartirmaydi. O'zgarishni boshqa narsa keltirib chiqaradi: :hover, :focus, class qo'shilishi (JavaScript), media query.

To'rt xususiyat

transition: <property> <duration> <timing-function> <delay>;

transition-property — nima animatsiyalanadi

transition-property: background;
transition-property: transform, opacity;    /* bir nechta */
transition-property: all;                    /* hamma narsa */

[!WARNING] transition: all — qulay, lekin xavfli: kelajakda qo'shilgan har qanday xususiyat (masalan, width yoki padding) ham animatsiyalanadi — kutilmagan "sudralish" va tezlik muammolari. Aniq xususiyatlarni yozing.

transition-duration — davomiyligi

transition-duration: 200ms;    /* yoki 0.2s */

Interfeys animatsiyalari tez bo'lishi kerak — foydalanuvchi kutmasligi uchun.

transition-timing-function — tezlik egri chizig'i

Animatsiya davomida tezlik qanday o'zgaradi:

.panel {
  transition: transform 300ms cubic-bezier(0.16, 1, 0.3, 1);   /* "ease-out-expo" — yumshoq to'xtash */
}

Haqiqiy dunyoda narsalar birdaniga to'xtamaydi — ease-out tabiiy his beradi. DevTools da transition yonidagi egri chiziq belgisiga bosing — vizual muharrir ochiladi.

transition-delay — kechikish

transition-delay: 100ms;

Dropdown sichqoncha tasodifan o'tib ketganda ochilib ketmasligi uchun foydali:

.dropdown-menu {
  opacity: 0;
  visibility: hidden;
  transition: opacity 200ms, visibility 200ms;
}

.dropdown:hover .dropdown-menu {
  opacity: 1;
  visibility: visible;
  transition-delay: 150ms;     /* ochilishda kechikish */
}

Qisqa yozuv va bir nechta transition

.card {
  transition:
    transform 250ms ease-out,
    box-shadow 250ms ease-out,
    border-color 150ms;
}

.card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 24px rgb(0 0 0 / 0.12);
  border-color: #2563eb;
}

Har bir xususiyat — o'z davomiyligi va egri chizig'i bilan, vergul bilan ajratiladi.

Nimani animatsiyalash mumkin

Faqat oraliq qiymati bor xususiyatlar: rang (qizildan ko'kka), raqamlar (0 dan 1 gacha), uzunliklar.

display: none ni animatsiyalash

Element paydo bo'lishi va yo'qolishi — display o'rniga opacity + visibility:

.toast {
  opacity: 0;
  visibility: hidden;        /* ko'rinmas va bosib bo'lmaydi */
  transform: translateY(8px);
  transition: opacity 200ms, transform 200ms, visibility 200ms;
}

.toast.show {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

Tezlik: faqat transform va opacity

Brauzer sahifani chizish uchun uch bosqichdan o'tadi (1-dars): layout → paint → composite. Qaysi xususiyat o'zgarishiga qarab:

/* ❌ har kadrda layout qayta hisoblanadi, telefonda "qotadi" */
.panel { transition: left 300ms; }
.panel.open { left: 0; }

/* ✅ GPU da, silliq */
.panel { transition: transform 300ms; }
.panel.open { transform: translateX(0); }

Harakatlantirish — transform: translate(), kattalashtirish — transform: scale(), paydo bo'lish — opacity. Batafsil — 29-dars.

Foydalanuvchini hurmat qilish

26-darsdan — tizimda "harakatni kamaytirish" yoqilgan bo'lsa:

@media (prefers-reduced-motion: reduce) {
  * {
    transition-duration: 0.01ms !important;
  }
}

Rang o'zgarishlari kabi mayda effektlarni qoldirish mumkin, lekin harakat (siljish, kattalashish) — o'chirilsin.

Nima uchun shunday?

Nima uchun animatsiyalar shunchaki "bezak" emas, balki interfeysning muhim qismi hisoblanadi?

Chunki ular tushunishga yordam beradi. Inson ko'zi to'satdan o'zgarishni yaxshi kuzatmaydi: element birdaniga paydo bo'lsa, "qayerdan keldi?", birdaniga yo'qolsa — "nima bo'ldi?" degan savol tug'iladi. Qisqa animatsiya sabab va natijani bog'laydi: menyu tugmadan "chiqadi", o'chirilgan element "yo'qolib ketadi", yangi xabar "tushadi". Bu hayotdagi jismlar xatti-harakatiga o'xshash bo'lgani uchun miya uni zo'riqmasdan tushunadi. Lekin chegara muhim: animatsiya tez (300ms gacha) va ma'noli bo'lishi kerak — aks holda u yordam emas, to'siqqa aylanadi.

Xulosa

Eslab qoling:

• transition: xususiyat davomiylik egri-chiziq kechikish
• Asosiy holatga yozing (.btn), :hover ga emas — ikki tomonga ishlaydi
• all emas — aniq xususiyatlar
• Davomiylik: 150–300ms; egri chiziq: kirish — ease-out, chiqish — ease-in
• display animatsiyalanmaydi → opacity + visibility
• Tez animatsiya — faqat transform va opacity; width/left — qimmat
• prefers-reduced-motion ni hurmat qiling

Keyingi dars

29-dars: Transform — translate, rotate, scale, skew