CSS View Transitions-ni o'zlashtirish: Animatsiya sinflarini tayinlash kuchi

Front-end dasturlashning doimiy rivojlanayotgan landshaftida jozibador va silliq foydalanuvchi tajribasini yaratish eng muhim vazifadir. Bugungi kunda foydalanuvchilar ularni kontent orqali uzluksiz yo'naltiradigan dinamik, sezgir va vizual jozibali interfeyslarni kutishadi. CSS View Transitions, veb-sahifaning turli holatlari yoki ko'rinishlari o'rtasida silliq, animatsiyalangan o'zgarishlarni amalga oshirish imkonini beruvchi kuchli xususiyat bo'lib, ushbu tendentsiyaning oldingi saflarida turadi. Bu kuchdan foydalanishning asosiy jihati animatsiya sinflarini samarali tayinlashda yotadi.

Ushbu keng qamrovli qo'llanma CSS View Transitions-ning nozikliklarini, animatsiya sinflarini strategik tayinlash veb-animatsiyalaringizni funksional darajadan haqiqatan ham maftunkor darajaga qanday ko'tarishi mumkinligiga alohida e'tibor qaratgan holda chuqur o'rganadi. Biz butun dunyodagi dasturchilarga murakkab va samarali animatsion o'tishlarni yaratishga yordam berish uchun asosiy tamoyillar, amaliy tatbiq etish texnikalari va eng yaxshi amaliyotlarni ko'rib chiqamiz.

CSS View Transitions-ni tushunish

CSS View Transitions DOM holatlari o'rtasidagi o'zgarishlarni animatsiya qilishning deklarativ usulini taklif etadi. Murakkab JavaScript animatsiyalarini qo'lda boshqarish yoki og'ir freymvorklarga tayanish o'rniga, View Transitions dasturchilarga DOM o'zgarganda elementlar qanday animatsiya qilinishini belgilash imkonini beradi. Bu ayniqsa quyidagi stsenariylar uchun foydalidir:

• Sahifa navigatsiyasi: Bir sahifali ilovaning (SPA) turli sahifalari yoki bo'limlari o'rtasidagi o'tishni animatsiya qilish.
• Modal va qoplama animatsiyalari: Modallar, yon panellar yoki boshqa qoplama elementlarini silliq paydo qilish yoki yo'qotish.
• Kontentni yangilash: Akkordeonlarni kengaytirish/yig'ish yoki mahsulot rasmlarini o'zgartirish kabi kontent bloklarining paydo bo'lishi yoki yo'qolishini animatsiya qilish.
• Roʻyxat va panjara transformatsiyalari: Roʻyxat yoki panjaradagi elementlarni qayta tartiblash kabi maket o'zgarishlarini animatsiya qilish.

View Transitions ortidagi asosiy g'oya - o'zgarish sodir bo'lishidan oldin DOMning "lahzalik suratini" olish va keyin DOM yangilanganda farqlarni animatsiya qilishdir. Ushbu yondashuv yanada samaraliroq va vizual jihatdan yoqimli animatsiyalarga olib keladi, chunki brauzer renderlash jarayonini optimallashtirishi mumkin.

Animatsiya sinflarining roli

View Transitions DOM o'zgarishlarini animatsiya qilish mexanizmini taqdim etsa-da, ushbu animatsiyalarning qanday va nima ekanligi ko'pincha CSS sinflari orqali boshqariladi. Animatsiya sinflari ma'lum animatsiya harakatlari uchun trigger va tavsiflovchi vazifasini bajaradi.

Biror element DOMdan olib tashlanganda asta-sekin yo'qolishini va boshqa element paydo bo'lishini xohlagan stsenariyni ko'rib chiqing. Siz .fade-out va .fade-in kabi sinflar bilan bog'liq CSS qoidalarini belgilashingiz mumkin. Elementni olib tashlash niyat qilinganda, unga .fade-out sinfini qo'shasiz va yangi element paydo bo'lganda .fade-in sinfini qo'shasiz.

View Transitions-ning kuchi ularning ushbu sinf o'zgarishlarini qanday qilib ushlab qolishi va animatsiyani o'zi uchun aniq JavaScript aralashuvisiz avtomatik ravishda qo'llashida yotadi. Dasturchining roli holatlarni va ular o'rtasidagi o'tishlarni, ko'pincha CSS sinflarini strategik qo'llash va olib tashlash orqali aniqlashga aylanadi.

Animatsiya sinflari bilan View Transitions-ni amalga oshirish

CSS View Transitions-ni amalga oshirish odatda o'tishni boshlash uchun JavaScript va animatsiyalarni aniqlash uchun CSS-ni o'z ichiga oladi. Keling, umumiy ish jarayonini ko'rib chiqaylik:

1. View Transitions-ni yoqish (JavaScript)

View Transitions-dan foydalanish uchun avval ularni yoqishingiz kerak. Eksperimental View Transitions API (bu tobora standartlashib bormoqda) uchun bu ko'pincha JavaScript chaqiruvini o'z ichiga oladi. Aniq sintaksis API rivojlanishi bilan bir oz o'zgarishi mumkin, ammo umumiy naqsh document.startViewTransition() usulini o'z ichiga oladi.

Ushbu usul DOM yangilanishlarini bajaradigan qayta chaqirish (callback) funksiyasini qabul qiladi. Shundan so'ng brauzer joriy DOM holatini qayd etadi, qayta chaqirishni bajaradi, yangi DOM holatini qayd etadi va ular orasidagi o'zgarishlarni animatsiya qiladi.

Misol (Konseptual JavaScript):

            
document.addEventListener('click', async (event) => {
  // Nima o'zgarishi kerakligini aniqlash (masalan, havola bosilishi)
  const target = event.target.closest('a');
  if (!target || !target.href) return;

  // Standart navigatsiyani oldini olish va uni qo'lda boshqarish
  event.preventDefault();

  // Ko'rinish o'tishini boshlash
  document.startViewTransition(async () => {
    // DOM yangilanishlarini ushbu callback ichida bajarish
    // Bu yangi kontentni yuklash, elementlarni o'zgartirish va h.k. bo'lishi mumkin.
    const response = await fetch(target.href);
    const html = await response.text();
    document.body.innerHTML = html; // Namoyish uchun oddiy almashtirish
  });
});

            

              
                Copy
              
            
          

2. Animatsiyalarni CSS sinflari bilan aniqlash

Bu yerda animatsiya sinflarini tayinlash juda muhim bo'ladi. DOM yangilanishi callback-i ichida siz sinflarni qo'shish va olib tashlash orqali elementlarni boshqarasiz. Keyin bu sinflar CSS o'tishlari yoki animatsiyalarini ishga tushiradi.

Keling, sahifadagi ikki xil kontent bo'limi o'rtasida o'tish stsenariysini ko'rib chiqaylik. Biz chiquvchi bo'limning yo'qolishini va kiruvchi bo'limning paydo bo'lishini xohlashimiz mumkin.

CSS Misoli:

            
/* Animatsiya qilinadigan elementlar uchun uslublar */
.view-transition-element {
  opacity: 1;
  transition: opacity 0.3s ease-in-out;
}

/* O'chib yo'qolish uchun qo'llaniladigan sinf */
.fade-out {
  opacity: 0;
}

/* Paydo bo'lish uchun qo'llaniladigan sinf */
.fade-in {
  opacity: 1;
}

/* Dastlab ko'rinmas bo'lishi kerak bo'lgan DOMga kiruvchi elementlar uchun */
.initial-hidden {
  opacity: 0;
}

            

              
                Copy
              
            
          

Endi buni JavaScript bilan birlashtiraylik. Aytaylik, bizda ikkita asosiy kontent div-i bor va biz ular o'rtasida almashishni xohlaymiz.

Yangilangan JavaScript (Konseptual):

            
function performContentSwap(outgoingElement, incomingElement) {
  document.startViewTransition(() => {
    // Chiquvchi elementga fade-out sinfini qo'shish
    outgoingElement.classList.add('fade-out');

    // Kiruvchi element DOMda va kerak bo'lsa, dastlab yashirin ekanligiga ishonch hosil qilish
    // (Bu sizning DOM tuzilmangiz va elementlar qanday boshqarilishiga bog'liq)
    incomingElement.classList.add('initial-hidden'); // Agar u yangi bo'lsa yoki boshlang'ich holatga muhtoj bo'lsa
    incomingElement.classList.remove('fade-out'); // fade-out yo'qligiga ishonch hosil qilish

    // fade-out o'tishining yakunlanishini kutish (yoki qisqa kechikish)
    // Bu yerda animatsiyalarni sinxronlashtirish uchun murakkabroq texnikalar kerak bo'lishi mumkin.
    // Oddiylik uchun biz to'g'ridan-to'g'ri ko'rinishni boshqaramiz va keyin fade-in ni qo'llaymiz.

    // Kiruvchi elementni ko'rinadigan qilib, u paydo bo'lishi uchun
    incomingElement.classList.remove('initial-hidden');
    incomingElement.classList.add('fade-in');

    // Qisqa kechikishdan so'ng, chiquvchi elementdan fade-out sinfini olib tashlash
    // va uni to'liq yashirish yoki DOMdan olib tashlash mumkin.
    // Bu qism ilovangizning hayot aylanishiga qarab ehtiyotkorlik bilan boshqarishni talab qiladi.
    setTimeout(() => {
      outgoingElement.style.display = 'none'; // Yoki DOMdan olib tashlash
    }, 300); // O'tish davomiyligiga moslashtirish
  });
}

// Foydalanish misoli: Kontentni almashtirish uchun tugmalaringiz bor deb taxmin qilsak
document.getElementById('show-section-a-btn').addEventListener('click', () => {
  const sectionA = document.getElementById('section-a');
  const sectionB = document.getElementById('section-b');
  performContentSwap(sectionB, sectionA);
});

document.getElementById('show-section-b-btn').addEventListener('click', () => {
  const sectionA = document.getElementById('section-a');
  const sectionB = document.getElementById('section-b');
  performContentSwap(sectionA, sectionB);
});

            

              
                Copy
              
            
          

Muhim eslatma: Mahalliy View Transitions API bu murakkablikning ko'p qismini avtomatik ravishda boshqarish uchun mo'ljallangan. document.startViewTransition()-dan foydalanganda, brauzer o'z xususiyatlari yoki pozitsiyalarini o'zgartiradigan elementlarni animatsiya qilishga harakat qiladi. Sinflarni qo'llash orqali siz ushbu avtomatik animatsiyalarni yo'naltirishingiz yoki ma'lum elementlar uchun maxsus animatsiyalarni belgilashingiz mumkin.

3. View Transitions API-ning avtomatik animatsiyalaridan foydalanish

View Transitions-ning haqiqiy kuchi ko'pincha uning eski va yangi DOM holatlarida mavjud bo'lgan elementlarni avtomatik ravishda animatsiya qilish qobiliyatidan kelib chiqadi. Bunga nomlangan elementlar orqali erishiladi.

Siz elementlarga view-transition-name CSS xususiyatini berishingiz mumkin. DOM o'zgarganda, agar ikkala lahzalik suratda ham bir xil view-transition-name ga ega elementlar mavjud bo'lsa, brauzer ularning o'tishini avtomatik ravishda animatsiya qiladi.

Nomlangan elementlar bilan CSS misoli:

            
.card {
  view-transition-name: card-transition;
  /* Boshqa uslublar */
}

.product-image {
  view-transition-name: product-image-transition;
  /* Boshqa uslublar */
}

            

              
                Copy
              
            
          

Sahifa kontenti o'zgarganda va view-transition-name: card-transition; ga ega bo'lgan element eski va yangi DOMda mavjud bo'lsa, brauzer uning harakati va tashqi ko'rinishidagi o'zgarishlarni avtomatik ravishda animatsiya qiladi. Bu elementlar ro'yxatlari va tafsilotlar ko'rinishlari o'rtasida silliq o'tishlarni yaratish uchun juda kuchli vositadir.

So'ngra siz ushbu avtomatik animatsiyalarni yanada sozlash uchun ::view-transition-old() va ::view-transition-new() kabi CSS psevdo-elementlaridan foydalanishingiz mumkin. Masalan, siz o'zaro yo'qolish effektini qo'llashni xohlashingiz mumkin:

            
::view-transition-old(root) {
  animation: fade-out 0.4s ease-out;
}
::view-transition-new(root) {
  animation: fade-in 0.4s ease-out;
}

@keyframes fade-out {
  from { opacity: 1; }
  to { opacity: 0; }
}
@keyframes fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

            

              
                Copy
              
            
          

Bu yerda root butun hujjatga ishora qiladi. Siz shuningdek, ma'lum nomlangan elementlarni nishonga olishingiz mumkin.

4. O'tishlar ichidagi maxsus animatsiyalar uchun sinflarni tayinlash

Avtomatik animatsiyalar ajoyib bo'lsa-da, ko'pincha sizga yanada nozikroq nazorat kerak bo'ladi. Bu yerda DOM yangilanishi callback-i ichida aniq sinf tayinlash o'zini namoyon qiladi.

Stsenariy: Vidjetlar qayta tartiblanadigan va yo'qoladigan murakkab boshqaruv paneli.

Foydalanuvchilar vidjetlarni qayta tartiblay oladigan boshqaruv panelini tasavvur qiling. Ular buni qilganda, siz ko'chirilayotgan vidjetlarning silliq animatsiya qilinishini, yangi vidjetlarning paydo bo'lishini va eskilarining yo'qolishini xohlaysiz.

JavaScript mantig'i:

1. Joriy holatni qayd etish: Qayta tartiblashdan oldin, barcha vidjetlarning pozitsiyalari va mavjudligini qayd eting.
2. DOM yangilanishini bajarish: Vidjetlarni DOMda qayta tartiblang. Yangi vidjetlarni qo'shing va eskilarini olib tashlang.
3. Sinflarni qo'llash:
   • Ko'chirilgan vidjetlar uchun: .is-moving sinfini qo'shing. Bu sinfda transition: transform 0.5s ease; xususiyati bo'lishi mumkin. View Transition-dan xabardor bo'lgan brauzer, transform xususiyatini eski pozitsiyasidan yangisiga avtomatik ravishda animatsiya qiladi.
   • Yangi vidjetlar uchun: .is-entering sinfini qo'shing. Bu sinfda opacity: 0; transition: opacity 0.5s ease; bo'lishi mumkin. DOM yangilanishida siz ushbu elementlar uchun opacity: 1; ni o'rnatasiz.
   • Olib tashlangan vidjetlar uchun: .is-leaving sinfini qo'shing. Bu sinfda opacity: 0; transition: opacity 0.5s ease; bo'lishi mumkin. Keyin ularni qisqa kechikishdan so'ng DOMdan olib tashlashingiz mumkin.

Boshqaruv paneli misoli uchun CSS:

            
.widget {
  /* Standart uslublar */
  transition: transform 0.5s ease, opacity 0.5s ease;
  opacity: 1;
}

.is-entering {
  opacity: 0;
}

.is-leaving {
  opacity: 0;
}

/* Kirishda brauzer 0 shaffoflikdan 1 ga o'tadi */
/* Chiqishda, o'chirishdan oldin o'tish qo'llanilishiga ishonch hosil qilishimiz kerak */

            

              
                Copy
              
            
          

Asosiy tushuncha: View Transitions API DOM lahzalik suratlarini solishtirish orqali ishlaydi. Siz View Transitions allaqachon kuzatib borayotgan biror element uchun opacity yoki transform kabi xususiyatni o'zgartiradigan sinf qo'shganingizda, u ushbu xususiyat o'zgarishini animatsiya qiladi. .is-entering yoki .is-leaving kabi sinflarni qo'shish orqali siz aslida animatsiyaning boshlang'ich holatini o'rnatasiz va brauzer yakuniy holatga o'tishni boshqaradi.

View Transitions bilan animatsiya sinflarini tayinlash bo'yicha eng yaxshi amaliyotlar

CSS View Transitions-laringizning samaradorligi va saqlanuvchanligini oshirish uchun ushbu eng yaxshi amaliyotlarni ko'rib chiqing:

1. Uni semantik va deklarativ saqlang

Animatsiyaning maqsadini aniq tasvirlaydigan sinf nomlaridan foydalaning (masalan, .fade-in, .slide-from-right, .scale-up). Bu sizning CSS-ingizni tushunish va saqlashni osonlashtiradi. Iloji boricha, view-transition-name-dan foydalanib, opacity va transform kabi xususiyatlarning asosiy animatsiyasini View Transitions API-ga topshiring. Aniq sinfga asoslangan animatsiyalarni avtomatik ravishda boshqarilmaydigan elementlar yoki murakkabroq ketma-ketliklar uchun saqlab qo'ying.

2. Davomiylik va yengillashtirishni sinxronlashtiring

CSS sinflaringizdagi transition-duration va transition-timing-function View Transition-ning kutilgan harakatiga mos kelishiga ishonch hosil qiling. Agar siz nomlangan elementlarning avtomatik animatsiyalariga tayanayotgan bo'lsangiz, standart brauzer o'tishi etarli bo'lishi mumkin yoki siz uni ::view-transition-old() va ::view-transition-new() psevdo-elementlari yordamida bekor qilishingiz mumkin.

3. Elementlarning hayot aylanishini ehtiyotkorlik bilan boshqaring

Elementlar DOMdan olib tashlanganda, ularning chiqish animatsiyasi haqiqatan ham olib tashlanishidan oldin tugashiga ishonch hosil qiling (masalan, setTimeout yordamida yoki animatsiya tugashi hodisalarini tinglash orqali). View Transitions API buni soddalashtirishga qaratilgan, ammo murakkab stsenariylarda qo'lda boshqarish hali ham zarur bo'lishi mumkin. DOMga kiruvchi elementlar uchun ular mavjudligiga va animatsiya qilish uchun mos ravishda uslublanganligiga ishonch hosil qiling.

4. `view-transition-name`-dan strategik foydalaning

O'tishlar davomida doimiy vizual identifikatsiyaga ega bo'lishi kerak bo'lgan asosiy elementlarni aniqlang (masalan, mahsulot rasmlari, foydalanuvchi avatarlari, asosiy kontent bloklari). Ularga noyob view-transition-name tayinlash brauzerga ularning pozitsiyasi va o'lchamlari o'zgarishlarini avtomatik ravishda animatsiya qilish imkonini beradi, bu esa juda silliq effekt yaratadi.

5. Samaradorlikni hisobga oling

View Transitions samaradorlik uchun mo'ljallangan bo'lsa-da, bir vaqtning o'zida juda ko'p elementlarni, ayniqsa maket o'zgarishlarini (reflow-larni ishga tushiradigan) o'z ichiga olganlarni animatsiya qilish hali ham ishlashga ta'sir qilishi mumkin. Animatsiyalaringizni profillang va kerak bo'lganda optimallashtiring. opacity va transform-ni animatsiya qilishni afzal ko'ring, chunki ular odatda samaraliroqdir.

6. Progressiv takomillashtirish

View Transitions zamonaviy brauzer xususiyatidir. Ilovangiz ularni qo'llab-quvvatlamaydigan eski brauzerlarda foydalanuvchilar uchun funksional va foydalanishga yaroqli bo'lib qolishiga ishonch hosil qiling. Silliq zaxira variantlari yoki oddiyroq o'tishlarni ta'minlang.

7. Global mulohazalar va foydalanish imkoniyati

Global auditoriya uchun animatsiyalarni loyihalashda:

• Harakatni kamaytirish: Kamaytirilgan harakatni afzal ko'radigan foydalanuvchilar uchun imkoniyat yarating. Buni prefers-reduced-motion media so'rovini tekshirish va animatsiyalarni o'chirish yoki soddalashtirish orqali amalga oshirish mumkin.
• Yorqinlikdan ko'ra aniqlik: Animatsiyalar chalg'itmasligi, balki tushunishni kuchaytirishi kerak. Animatsiyalarning juda tez, juda keskin yoki juda tez-tez bo'lmasligiga ishonch hosil qiling.
• Kontrast: Matn va interaktiv elementlar animatsiya davomida ko'rinadigan va etarli kontrastga ega bo'lishini ta'minlang.
• Animatsiya yo'nalishi: Yo'nalishning madaniy talqinlaridan xabardor bo'ling. Chapdan o'ngga keng tarqalgan bo'lsa-da, kontekstni hisobga oling.

8. Asboblar va nosozliklarni tuzatish

Brauzer dasturchi vositalari View Transitions-ni disk raskadrovka qilish uchun zarurdir. Siz DOM lahzalik suratlarini tekshirishingiz, qo'llanilgan uslublarni ko'rib chiqishingiz va qiyinchiliklarni aniqlash uchun ishlashni profillash vositalaridan foydalanishingiz mumkin. Masalan, Chrome DevTools, View Transitions-ni vizualizatsiya qilish va disk raskadrovka qilishga yordam beradigan maxsus xususiyatlarni taklif etadi.

Ilg'or texnikalar va stsenariylar

Maket siljishlarini animatsiya qilish

View Transitions o'z pozitsiyasini o'zgartiradigan elementlarni animatsiya qilish orqali maket siljishlarini boshqarishi mumkin. Bu, ayniqsa, cheksiz aylantirish yoki dinamik kontent yuklash kabi xususiyatlarni amalga oshirishda foydalidir, bunda elementlar panjara yoki ro'yxatga qo'shiladi yoki olib tashlanadi. Ro'yxatdagi elementlarga umumiy view-transition-name berish orqali siz silliq qayta tartiblash animatsiyalariga erishishingiz mumkin.

Maxsus elementlar uchun maxsus animatsiyalar

Siz View Transition-ning CSS-i ichida ularni nishonga olish orqali ma'lum elementlar uchun yuqori darajada moslashtirilgan animatsiyalar yaratishingiz mumkin. Masalan, yangi bo'limni ochadigan ma'lum bir tugma bosilishini animatsiya qilish:

Stsenariy: Kontent maydonini kengaytirish uchun "Batafsil ma'lumot" tugmasini bosish.

HTML:

            
<div id="summary">Qisqa xulosa...</div>
<button id="expand-btn">Batafsil ma'lumot</button>
<div id="details" class="hidden">To'liq kontent shu yerda...</div>

            

              
                Copy
              
            
          

CSS:

            
.hidden {
  display: none;
}

#details {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.5s ease-out;
}

.is-expanded {
  max-height: 500px; /* Yoki hisoblangan qiymat */
  display: block;
}

            

              
                Copy
              
            
          

JavaScript:

            
document.getElementById('expand-btn').addEventListener('click', () => {
  const details = document.getElementById('details');
  document.startViewTransition(() => {
    details.classList.add('is-expanded');
    details.classList.remove('hidden'); // Ko'rsatilishi mumkinligiga ishonch hosil qilish
  });
});

            

              
                Copy
              
            
          

Bu holda, startViewTransition #details kengaytirilishidan oldingi holatni qayd etadi. #details-dagi CSS transition xususiyati is-expanded sinfi qo'llanilganda silliq kengayishni boshqaradi. View Transition API bu o'zgarishning bir butun o'tishning bir qismi ekanligini ta'minlaydi.

Yo'qolib, qayta paydo bo'ladigan elementlar bilan animatsiyalarni boshqarish

Olib tashlanadigan va keyin qayta qo'shiladigan elementlar uchun (masalan, yorliqlarni almashtirish), view-transition-name yondashuvi bebahodir. Agar element ikkala lahzalik suratda ham bir xil nomga ega bo'lsa, brauzer uning yo'qolishi va keyinchalik qayta paydo bo'lishini uzluksiz animatsiya qilishi mumkin.

Xulosa

CSS View Transitions, animatsiya sinflarini tayinlash bo'yicha puxta o'ylangan strategiya bilan birgalikda, zamonaviy, jozibador veb-tajribalarini yaratish uchun kuchli vositalar to'plamini taklif etadi. O'tishlarni ishga tushirish uchun JavaScript-dan va sinflar orqali animatsiya harakatlarini aniqlash uchun CSS-dan qanday foydalanishni tushunib, dasturchilar silliq, samarali va vizual jihatdan boy interfeyslarni yaratishlari mumkin.

Asosiy narsa deklarativ o'ylashdir: holatlarni (ko'pincha sinflar yordamida) aniqlang va View Transitions API va sizning CSS-ingiz tomonidan boshqariladigan brauzerga animatsiyani bajarishga ruxsat bering. Sahifa navigatsiyasi, modallar yoki murakkab kontent maketlarini animatsiya qilyapsizmi, View Transitions-laringizda animatsiya sinflarini tayinlashni o'zlashtirish, shubhasiz, sizning front-end dasturlash ko'nikmalaringizni va global auditoriyaga taqdim etadigan foydalanuvchi tajribangizni yuqori darajaga ko'taradi.

View Transitions API yetuklashishda va kengroq brauzer qo'llab-quvvatlashiga ega bo'lishda davom etar ekan, uni qabul qilish faqat o'sib boradi. Uni hozir qabul qilish va ushbu animatsiyalarni boshqarishda CSS sinflarining asosiy rolini tushunish sizni veb-dizayn va dasturlashning eng ilg'or qatoriga qo'yadi.