CSS'da transition va animation bir-biridan nimasi bilan farq qiladi?

Savol

transition @keyframes/animationdan nimasi bilan farq qiladi va unumdorlik nuqtai nazaridan qaysi xususiyatlarni animatsiya qilish foydaliroq?

Qisqa javob

transition xususiyatning ikki holati orasidagi silliq o'tishni tasvirlaydi va faqat qiymat o'zgarganda (masalan, :hover bo'yicha yoki klass almashganda) ishga tushadi. @keyframes/animation esa o'zi ishga tushishi, tsikllanishi va tashqi triggersiz takrorlanishi mumkin bo'lgan ko'p bosqichli holatlar ketma-ketligini tasvirlaydi. Unumdorlik nuqtai nazaridan layout/paint chaqiradigan xususiyatlar emas, balki transform va opacityni animatsiya qilish foydaliroq.

Batafsil javob

transition CSS-xususiyat qiymatining o'zgarishiga reaksiya bildiradi: bir qiymat bo'lgan, boshqasiga aylangan — brauzer ular orasida berilgan vaqt davomida silliq interpolyatsiya qiladi. transitionda har doim aniq ikkita nuqta bor — boshlanish va tugash, oraliq bosqichlarsiz. Tashqi triggerni talab qiladi: klass, psevdoklass (:hover, :focus) o'zgarishi yoki JS orqali inline stil.

@keyframes + animation har qanday sonli oraliq holatlarni (0%, 50%, 100% va h.k.) tasvirlash imkonini beradi va tashqi triggerga muhtoj emas — animatsiya klass qo'llanganda o'zi boshlanishi va avtonom ishlashi mumkin. transitionda bo'lmagan qo'shimcha imkoniyatlar:

• animation-iteration-count — tsikllanish (infinite yoki aniq takrorlar soni).
• animation-direction — bir yoqdan-bir yoqqa harakat uchun alternate.
• animation-fill-mode — animatsiyadan oldingi/keyingi holatni saqlash (forwards, backwards).
• animation-delay, animation-play-state — pauza va kechikishni boshqarish.

Unumdorlik: brauzer sahifani layout → paint → composite konveyeri orqali renderlaydi. Geometriyaga ta'sir qiluvchi xususiyatlarning (width, height, top, left, margin) animatsiyasi brauzerni har kadrda daraxtning ta'sirlangan qismi uchun layout'ni qayta hisoblashga majbur qiladi — bu qimmatga tushadi va "silkinuvchi" animatsiyaga (jank) olib kelishi mumkin. transform (translate, scale, rotate) va opacityning animatsiyasi esa faqat composite bosqichida, ko'pincha GPU'da, layout va paint'ni chetlab o'tib bajarilishi mumkin — bu arzonroq va silliqroq. will-change: transformni brauzerga oldindan alohida kompozit qatlam tayyorlash haqida maslahat sifatida ishlatish mumkin, lekin undan suiiste'mol qilmaslik kerak — ortiqcha qatlamlar xotira sarfini oshiradi.

Misol

/* transition: hover bo'yicha holatlar orasidagi o'tish */
.button {
  background-color: #3b82f6;
  transform: translateY(0);
  transition: background-color 0.2s ease, transform 0.2s ease;
}
.button:hover {
  background-color: #2563eb;
  transform: translateY(-2px);
}

/* animation: avtonom tsiklli ketma-ketlik */
@keyframes pulse {
  0%   { transform: scale(1);   opacity: 1; }
  50%  { transform: scale(1.05); opacity: 0.8; }
  100% { transform: scale(1);   opacity: 1; }
}

.badge {
  animation: pulse 1.6s ease-in-out infinite;
}

/* unumdorlik uchun yomon: layout-xususiyati animatsiya qilinmoqda */
.bad-example {
  transition: width 0.3s ease, left 0.3s ease;
}

/* yaxshi: xuddi shu vizual effekt transform orqali */
.good-example {
  transition: transform 0.3s ease;
}

Qo'shimcha savollar

• Composite layer nima va nega transform/opacity layout va paint'ni chetlab o'tib animatsiya qilinishi mumkin?
• animation-fill-mode: forwards qanday ishlaydi va u nima uchun kerak?
• JS'dagi requestAnimationFrame CSS-animatsiyalardan nazorat va unumdorlik nuqtai nazaridan nimasi bilan farq qiladi?