CSS Keyframes Qoidasi: Animatsiya Vaqt Jadvalini Belgilash va Boshqarish

Veb-dasturlashning dinamik dunyosida jozibali va vizual jozibador foydalanuvchi tajribasini yaratish qobiliyati birinchi o'rinda turadi. CSS keyframes HTML elementlarini animatsiya qilish uchun kuchli mexanizmni taqdim etadi, bu esa dasturchilarga maxsus animatsiya vaqt jadvallarini belgilash va veb-saytlarni jonlantirish imkonini beradi. Ushbu keng qamrovli qo'llanma CSS keyframes qoidasining nozikliklarini chuqur o'rganadi, uning funksionalligi, amaliy qo'llanilishi va ilg'or texnikalari haqida to'liq tushuncha beradi, bularning barchasi global auditoriya uchun moslashtirilgan.

CSS Keyframes Qoidasini Tushunish

Aslida, CSS keyframes qoidasi animatsiya qadamlari ketma-ketligini belgilashga imkon beradi. Ushbu qadamlar yoki kadrlari animatsiya davomida elementning turli vaqt nuqtalaridagi uslublarini belgilaydi. Keyin brauzer animatsiya effektini yaratish uchun ushbu kadrlar o'rtasida silliq interpolyatsiya qiladi. Bu yondashuv animatsiya jarayonini aniq nazorat qilish imkonini beradi, bu esa dasturchilarga foydalanuvchilarning qiziqishini oshiradigan murakkab va nozik animatsiyalar yaratishga yordam beradi.

Keyframes qoidasining asosiy sintaksisi quyidagicha:

            @keyframes animationName {
  from {
    /* Boshlang'ich uslublar */
  }
  to {
    /* Yakuniy uslublar */
  }
}

            

              
                Copy
              
            
          

Yoki foizga asoslangan kadrlardan foydalanib:

            @keyframes animationName {
  0% {
    /* Boshlang'ich uslublar */
  }
  25% {
    /* Animatsiya davomiyligining 25% dagi uslublar */
  }
  50% {
    /* Animatsiya davomiyligining 50% dagi uslublar */
  }
  75% {
    /* Animatsiya davomiyligining 75% dagi uslublar */
  }
  100% {
    /* Yakuniy uslublar */
  }
}

            

              
                Copy
              
            
          

Mana asosiy komponentlarning tavsifi:

• @keyframes: Kadrlarni aniqlashni boshlaydigan at-qoida.
• animationName: Animatsiya uchun noyob identifikator. Siz bu nomni animatsiya qilinadigan elementning animatsiya xususiyatlarida ishlatasiz.
• from yoki 0%: Animatsiyaning boshlanish nuqtasini (animatsiya davomiyligining 0%) bildiradi. Siz shuningdek, oxirini ifodalash uchun `to` yoki `100%` dan foydalanishingiz mumkin.
• to yoki 100%: Animatsiyaning tugash nuqtasini (animatsiya davomiyligining 100%) bildiradi.
• 25%, 50%, 75%: Animatsiya vaqt jadvalidagi oraliq nuqtalarni ifodalovchi foiz qiymatlari.

Asosiy Animatsiya Xususiyatlari

Kadrlarni aniqlaganingizdan so'ng, ularni bir nechta animatsiyaga oid CSS xususiyatlaridan foydalanib HTML elementiga qo'llashingiz kerak. Ushbu xususiyatlar animatsiyaning xatti-harakati va ko'rinishini boshqaradi. Mana eng muhimlari:

• animation-name: Ishlatiladigan kadrlari animatsiyasining nomini belgilaydi. Bu kadrlarni aniqlashni elementga bog'laydi.
• animation-duration: Animatsiyaning bir siklni yakunlashi uchun ketadigan vaqt uzunligini belgilaydi (masalan, 2s 2 soniya uchun).
• animation-timing-function: Animatsiyaning vaqt o'tishi bilan qanday rivojlanishini belgilaydi (masalan, linear, ease, ease-in, ease-out, cubic-bezier()). Bu animatsiyaning tezligi va tezlanishini boshqaradi.
• animation-delay: Animatsiya boshlanishidan oldin kechikishni belgilaydi.
• animation-iteration-count: Animatsiya necha marta takrorlanishi kerakligini belgilaydi (masalan, cheksiz takrorlash uchun infinite yoki uch marta ishlashi uchun 3 kabi raqam).
• animation-direction: Animatsiyaning oldinga, orqaga yoki ikkalasi o'rtasida almashinib o'ynashi kerakligini belgilaydi (masalan, normal, reverse, alternate, alternate-reverse).
• animation-fill-mode: Animatsiya bajarilishidan oldin va keyin elementga uslublarni qanday qo'llashini belgilaydi (masalan, none, forwards, backwards, both).
• animation-play-state: Animatsiyaning ishlayotgani yoki to'xtatilganligini boshqaradi (masalan, running, paused).

Keling, bu xususiyatlarni bir misol bilan ko'rib chiqaylik. Aytaylik, biz kvadrat elementni aylantiradigan oddiy animatsiya yaratmoqchimiz. Kod namunasini ko'rib chiqing, undan so'ng elementlarning tushuntirishi beriladi.

            <!DOCTYPE html>
<html lang="uz">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS Keyframes Misoli</title>
    <style>
        .square {
            width: 100px;
            height: 100px;
            background-color: #3498db;
            position: relative;
            animation-name: rotate;
            animation-duration: 3s;
            animation-timing-function: linear;
            animation-iteration-count: infinite;
        }

        @keyframes rotate {
            from {
                transform: rotate(0deg);
            }
            to {
                transform: rotate(360deg);
            }
        }
    </style>
</head>
<body>
    <div class="square"></div>
</body>
</html>

            

              
                Copy
              
            
          

Ushbu misolda:

• Biz belgilangan kenglik, balandlik va fon rangiga ega bo'lgan .square sinfini aniqlaymiz.
• Biz elementni nisbiy joylashuv kontekstiga aylantirish uchun position: relative; dan foydalanamiz, bu joylashuv ustidan ko'proq nazorat qilish imkonini beradi, garchi bu animatsiya uchun qat'iy zarur bo'lmasa ham.
• animation-name: rotate; animatsiyani rotate kadrlariga bog'laydi.
• animation-duration: 3s; animatsiya davomiyligini 3 soniyaga belgilaydi.
• animation-timing-function: linear; doimiy aylanish tezligini ta'minlaydi.
• animation-iteration-count: infinite; aylanishning cheksiz takrorlanishiga sabab bo'ladi.
• @keyframes rotate qoidasi aylanish animatsiyasini belgilaydi, elementni 0 darajadan 360 darajaga o'zgartiradi.

Ushbu oddiy misol kadrlarni tushunish uchun mustahkam asos yaratadi. Animatsiya xususiyatlari qo'shimcha imkoniyatlarni taqdim etadi. Animatsiya takrorlanishda davom etadi. Animatsiya xatti-harakatini takomillashtirish uchun kodni o'zgartiring va turli animatsiya xususiyatlari va qiymatlari bilan tajriba qiling.

Ilg'or Animatsiya Texnikalari

Asoslardan tashqari, CSS animatsiyalaringizni yanada murakkab va jozibali tajribalar yaratish uchun yuqori darajaga ko'taradigan bir nechta ilg'or texnikalar mavjud:

Bir Nechta Animatsiyalar

Animatsiya xususiyatlarini vergul bilan ajratib, bitta elementga bir nechta animatsiyalarni qo'llashingiz mumkin. Bu murakkab, qatlamli animatsiyalarni yaratishga imkon beradi. Masalan, siz aylanishni masshtablash effekti bilan birlashtirishingiz mumkin.

            
.element {
  animation-name: rotate, scale;
  animation-duration: 3s, 2s;
  animation-timing-function: linear, ease-in-out;
  animation-iteration-count: infinite, 1;
}

@keyframes rotate {
  /* ... */
}

@keyframes scale {
  /* ... */
}

            

              
                Copy
              
            
          

Animatsiyaning Qisqa Yozuvi

Animatsiya xususiyatlarini animation xususiyatidan foydalanib qisqa yozuvda ham yozish mumkin. Bu bir nechta xususiyatlarni biriga birlashtirib, kodni soddalashtiradi. Qisqa yozuvdagi qiymatlar tartibi muhim.

            
.element {
  animation: rotate 3s linear infinite;
}

            

              
                Copy
              
            
          

Ushbu qisqa yozuv `animation-name`, `animation-duration`, `animation-timing-function` va `animation-iteration-count` ni alohida-alohida o'rnatishga teng.

Animatsiya Kechikishi

animation-delay yordamida siz qiziqarli vizual effektlar yaratish yoki elementlarni turli vaqtlarda kiritish uchun animatsiyalarni bosqichma-bosqich amalga oshirishingiz mumkin, bu murakkab dizaynlar uchun foydalidir. Ushbu usul kaskadli animatsiyalarni va turli elementlar bo'ylab sinxronlashtirilgan animatsiyalarni yaratish uchun foydalidir. Bu ma'lum elementlarga e'tiborni jalb qilish yoki yanada murakkab, qatlamli foydalanuvchi tajribasini yaratish uchun foydali bo'lishi mumkin.

            
.element {
  animation-name: fadeIn;
  animation-duration: 1s;
  animation-delay: 0.5s; /* 0,5 soniyalik kechikish */
}

            

              
                Copy
              
            
          

Kubik Bezye Egri Chiziqlaridan Foydalanish

animation-timing-function xususiyati animatsiyangizning tezligini boshqarish imkonini beradi. cubic-bezier() sizga eng nozik nazoratni beradi. Bu yanada nozik va vizual jozibali animatsiyalar yaratishga imkon beradi. Siz egri chiziq shaklini belgilaydigan to'rtta nazorat nuqtasi yordamida maxsus vaqt funksiyalarini aniqlashingiz mumkin.

            
.element {
  animation-timing-function: cubic-bezier(0.4, 0, 0.6, 1);
}

            

              
                Copy
              
            
          

Maxsus cubic-bezier qiymatlarini yaratish uchun onlayn vositalar mavjud.

Animatsiyani To'ldirish Rejimlari

animation-fill-mode animatsiya boshlanishidan oldin va tugaganidan keyin elementga qo'llaniladigan uslublarni belgilaydi. Bu, ayniqsa, elementning ko'rinishini nazorat qilish uchun foydalidir. Masalan, animation-fill-mode: forwards; dan foydalanish animatsiya tugaganidan keyin elementning uslubini uning yakuniy kadrida saqlab qoladi.

            
.element {
  animation-fill-mode: forwards;
}

            

              
                Copy
              
            
          

Amaliy Misollar va Qo'llash Holatlari

CSS keyframes foydalanuvchi interfeyslarini yaxshilash va foydalanuvchi tajribasini oshirish uchun keng ko'lamli ilovalarda qo'llanilishi mumkin. Mana bir nechta misollar:

• Yuklanish Ko'rsatkichlari: Uzoq davom etadigan operatsiyalar paytida foydalanuvchilarga fikr-mulohaza berish uchun vizual jozibali yuklanish spinnerlari yoki progress barlarini yarating. Bu, ayniqsa, ma'lumotlarni yuklash sezilarli vaqt talab qilishi mumkin bo'lgan ilovalarda muhim ahamiyatga ega. (masalan, ko'plab global dasturiy ta'minot ilovalari)
• Interaktiv Tugmalar: Vizual ishoralarni taqdim etish va foydalanuvchi tajribasini yaxshilash uchun sichqonchani olib borganda yoki bosganda tugmalarga nozik animatsiyalar qo'shing. Ushbu animatsiyalar brendning o'ziga xosligiga moslashtirilishi mumkin. (masalan, butun dunyodagi elektron tijorat veb-saytlari)
• O'tishlar va Effektlar: Menyuni kengaytirish yoki yig'ish, aylantirishda kontentni ochish yoki sahifalar o'rtasida o'tish kabi elementning turli holatlari o'rtasida o'tish uchun animatsiyalardan foydalaning. (masalan, ko'plab mamlakatlardagi yangiliklar saytlari)
• Parallaks Aylantirish: Foydalanuvchi sahifani pastga aylantirganda elementlarni turli tezliklarda animatsiya qilish orqali parallaks aylantirish effektlarini yarating. Bu veb-saytlarga chuqurlik va vizual qiziqish qo'shishi mumkin. (masalan, butun dunyodagi ko'plab zamonaviy veb-saytlar)
• O'yin Yaratish: Jozibali o'yin tajribasini yaratish uchun qahramon harakatlari, ob'ektlarning o'zaro ta'siri va vizual effektlar kabi o'yin elementlari uchun animatsiyalarni amalga oshiring. (masalan, butun dunyodagi onlayn o'yin platformalari)

Misol: Sakrash Animatsiyasini Yaratish

Keling, kvadrat element uchun oddiy sakrash animatsiyasini yaratamiz. Ushbu misol silliq va vizual jozibali animatsiya effektini yaratish uchun kadrlardan qanday foydalanishni ko'rsatadi.

            
<!DOCTYPE html>
<html lang="uz">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Sakrash Animatsiyasi Misoli</title>
    <style>
        .container {
            width: 200px;
            height: 200px;
            position: relative;
            overflow: hidden; /* Kvadratning konteynerdan chiqib ketishini oldini olish */
        }

        .square {
            width: 50px;
            height: 50px;
            background-color: #e74c3c;
            position: absolute;
            bottom: 0; /* Pastdan boshlash */
            left: 50%;
            transform: translateX(-50%); /* Gorizontal markazlashtirish */
            animation-name: bounce;
            animation-duration: 1s;
            animation-timing-function: ease-out;
            animation-iteration-count: infinite;
        }

        @keyframes bounce {
            0%, 100% {
                bottom: 0;
            }
            50% {
                bottom: 150px; /* Sakrash balandligi */
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="square"></div>
    </div>
</body>
</html>

            

              
                Copy
              
            
          

Ushbu misolda biz konteyner ichida yuqoriga va pastga sakraydigan kvadrat yaratdik. bounce kadrlari animatsiyani belgilaydi, sakrash effektini yaratish uchun bottom xususiyati animatsiya qilinadi. ease-out vaqt funksiyasi animatsiyaga tabiiy tuyg'u beradi.

Foydalanish Imkoniyatlari (Accessibility) Haqida O'ylar

Animatsiyalarni loyihalashda, barcha foydalanuvchilar, shu jumladan nogironligi bo'lganlar ham kontentdan foydalana olishlari va zavqlanishlarini ta'minlash uchun foydalanish imkoniyatlarini (accessibility) hisobga olish juda muhim.

• Harakatni Kamaytirish Afzalliklari: Foydalanuvchilar harakat kasalligi yoki boshqa salbiy ta'sirlardan qochish uchun harakatni kamaytirishni afzal ko'rishlari mumkin. prefers-reduced-motion media so'rovi sizga bu afzallikni aniqlash imkonini beradi. Ushbu xususiyatni amalga oshirib, saytni harakatga sezgir foydalanuvchilar uchun yanada qulayroq qiling. Keyin bu foydalanuvchilar uchun animatsiyalarni o'chirib qo'yishingiz yoki soddalashtirishingiz mumkin.

              
      @media (prefers-reduced-motion: reduce) {
        /* Animatsiyalarni kamaytiradigan yoki o'chiradigan uslublarni qo'llang */
        .element {
          animation: none;
        }
      }
    
              
  
                
                  Copy
                
              
            

• Miltillovchi Kontentdan Saqlaning: Tez miltillaydigan yoki yorqin ranglarni o'z ichiga olgan animatsiyalar yaratishdan saqlaning, chunki ular ba'zi odamlarda tutqanoqlarni keltirib chiqarishi mumkin.
• Muqobil Variantlarni Taqdim Eting: Animatsiyalarni idrok eta olmaydigan foydalanuvchilar uchun matn tavsiflari yoki statik tasvirlar orqali ma'lumot olishning muqobil usullarini taklif qiling.
• Semantik HTMLdan Foydalaning: Ekran o'quvchilari kabi yordamchi texnologiyalarga kontekstni taqdim etish uchun HTML tuzilmangiz semantik jihatdan to'g'ri ekanligiga ishonch hosil qiling. Bu kontent va tuzilma uchun mos HTML teglaridan foydalanishni anglatadi.
• Rang Kontrastini Hisobga Oling: Ko'rish qobiliyati cheklangan foydalanuvchilar uchun o'qish qulayligini oshirish maqsadida animatsiyalangan elementlar va fon o'rtasida yetarli rang kontrastini ta'minlang. Yetarli kontrast darajasini ta'minlash uchun rang kontrasti tekshiruvchilaridan foydalaning.

CSS Keyframes Uchun Eng Yaxshi Amaliyotlar

CSS animatsiyalaringiz samaradorligini oshirish uchun ushbu eng yaxshi amaliyotlarni ko'rib chiqing:

• Ishlash Samaradorligini Optimallashtirish: Animatsiyalar uchun transform va opacity kabi apparat tomonidan tezlashtirilgan xususiyatlardan foydalaning, chunki ular ko'pincha width yoki height kabi xususiyatlarga qaraganda, ayniqsa mobil qurilmalarda, yaxshiroq ishlashga olib keladi. Ishlashdagi muammolarni aniqlash uchun brauzerning dasturchi vositalaridan foydalaning.
• Animatsiyalarni Oddiy Saqlang: Foydalanuvchi tajribasidan chalg'itishi mumkin bo'lgan haddan tashqari murakkab yoki chalg'ituvchi animatsiyalardan saqlaning. Aniq maqsadga xizmat qiladigan va foydalanish qulayligini oshiradigan animatsiyalarga e'tibor qarating.
• Brauzerlar Bo'ylab Sinovdan O'tkazing: Doimiy xatti-harakat va ko'rinishni ta'minlash uchun animatsiyalaringizni turli brauzerlar va qurilmalarda sinchkovlik bilan sinab ko'ring. Kross-brauzer mosligi global auditoriyaga erishish uchun juda muhimdir.
• Mazmunli Animatsiya Nomlaridan Foydalaning: Kodning o'qilishi va qo'llab-quvvatlanishini yaxshilash uchun kadrlaringizga tavsiflovchi va mazmunli nomlarni tanlang. To'g'ri nomlash qoidalari global loyihalarda jamoaviy hamkorlikni yaxshilashi mumkin.
• Kodingizni Modullashtiring: Kodning qayta ishlatilishini rag'batlantirish va ortiqchalikni kamaytirish uchun CSS kodingizni qayta ishlatiladigan komponentlarga ajrating. Ish jarayonini soddalashtirish uchun Sass yoki Less kabi CSS preprotsessorlaridan foydalaning.
• Foydalanuvchi Tajribasini Hisobga Oling: Nafaqat vizual jozibali, balki silliq va intuitiv foydalanuvchi oqimiga hissa qo'shadigan animatsiyalarni loyihalash orqali foydalanuvchi tajribasiga ustunlik bering. Keskin yoki chalg'ituvchi animatsiyalardan saqlaning.

Kadrlari va Xalqarolashtirish (i18n) va Mahalliylashtirish (l10n)

Global auditoriya uchun veb-saytlar yaratayotganda, xalqarolashtirish va mahalliylashtirishni yodda tuting. Animatsiya buning bir qismi bo'lishi mumkin. Quyidagi jihatlarni ko'rib chiqing:

• O'ngdan Chapga (RTL) Tartiblar: O'ngdan chapga o'qiladigan tillar uchun (arab yoki ibroniy kabi) animatsiyalarning aks ettirilgan yoki mos ravishda sozlanishiga ishonch hosil qiling. Bu turli matn yo'nalishlariga moslashish uchun left va right o'rniga inset-inline-start va inset-inline-end kabi mantiqiy xususiyatlardan foydalanishni o'z ichiga olishi mumkin. CSS-dagi `direction: rtl;` kabi vositalar aks ettirishda yordam berishi mumkin.
• Matn Yo'nalishi: Animatsiyalarni kontentning matn yo'nalishiga moslashtiring. Masalan, elementlarni chapdan siljitadigan animatsiyalar RTL tillari uchun o'ngdan siljishi uchun moslashtirilishi kerak.
• Madaniy Nozikliklar: Animatsiyalaringizda madaniy nozikliklarga e'tiborli bo'ling. Ba'zi madaniyatlarda haqoratli yoki nomaqbul deb hisoblanishi mumkin bo'lgan tasvirlar yoki harakat namunalaridan saqlaning. Madaniy nuanslarni o'rganish va tushunish tushunmovchiliklarning oldini oladi.
• Shriftlarni Qo'llab-quvvatlash: Animatsiyalaringizda ishlatiladigan shriftlar maqsadli tillarning belgilarini qo'llab-quvvatlashiga ishonch hosil qiling. Turli belgilar to'plamlariga xizmat qilish uchun keng ko'lamli gliflarni qamrab oladigan veb-shriftlardan foydalanishni ko'rib chiqing.
• Matnni Mahalliylashtirish: Agar animatsiyangiz matnni o'z ichiga olsa, matnning tegishli tilga mahalliylashtirilganligiga ishonch hosil qiling. Bu foydalanuvchining til sozlamalariga qarab matnni dinamik ravishda almashtirishni o'z ichiga olishi mumkin.

Vositalar va Resurslar

Turli vositalar va resurslar sizga CSS animatsiyalarini yaratish va boshqarishda yordam berishi mumkin:

• CSS Animatsiya Generatorlari: Keyframes.app va Animista kabi onlayn vositalar sizga vizual ravishda animatsiyalar yaratish va mos keladigan CSS kodini yaratish imkonini beradi. Bular, ayniqsa, yangi boshlanuvchilar uchun tezda ish boshlash uchun foydalidir.
• Brauzer Dasturchi Vositalari: Animatsiyalarni tekshirish, muammolarni tuzatish va ishlash samaradorligini optimallashtirish uchun brauzerning dasturchi vositalaridan (masalan, Chrome DevTools, Firefox Developer Tools) foydalaning. Ushbu vositalar animatsiyalarni disk raskadrovka qilish uchun kuchli xususiyatlarni taklif etadi.
• CSS Preprotsessorlari: CSS kodingizni tartibga solish, o'zgaruvchilardan foydalanish va qayta ishlatiladigan animatsiya komponentlarini yaratish uchun Sass yoki Less kabi CSS preprotsessorlaridan foydalanishni ko'rib chiqing. Bu loyihangiz o'sgan sari animatsiyalarni boshqarishni osonlashtirishi mumkin.
• Kutubxonalar va Freymvorklar: Yanada murakkab animatsiya ehtiyojlari uchun GreenSock (GSAP) yoki Anime.js kabi JavaScript animatsiya kutubxonalarini o'rganing. Ushbu kutubxonalar ilg'or xususiyatlarni va animatsiya vaqti va effektlari ustidan ko'proq nazoratni taklif qiladi.
• Onlayn Kurslar va Darsliklar: Udemy, Coursera va MDN Web Docs kabi platformalardagi ko'plab onlayn kurslar va darsliklar CSS kadrlari va animatsiya texnikalarini o'zlashtirish uchun chuqur bilim va amaliy mashg'ulotlarni taqdim etadi.

Xulosa

CSS keyframes qoidasi jozibali va dinamik veb-tajribalarni yaratish uchun asosiy qurilish blokidir. Ushbu qoidani o'zlashtirib, dasturchilar o'z veb-saytlarini animatsiya qilish, vizual qiziqish qo'shish va foydalanuvchilarning qiziqishini oshirish uchun cheksiz imkoniyatlarni ochishlari mumkin. Ushbu keng qamrovli qo'llanma CSS keyframes qoidasining sintaksisi, xususiyatlari, amaliy misollari va ilg'or texnikalarini qamrab olgan batafsil sharhni taqdim etdi. Veb rivojlanishda davom etar ekan, murakkab va intuitiv foydalanuvchi interfeyslariga bo'lgan talab faqat o'sib boradi, bu esa jozibali animatsiyalar yaratish qobiliyatini har qanday veb-dasturchi uchun qimmatli mahoratga aylantiradi. Oddiy yuklanish animatsiyalaridan tortib murakkab interaktiv tajribalargacha, CSS keyframes butun dunyodagi dasturchilarga o'zlarining ijodiy g'oyalarini hayotga tatbiq etish imkonini beradi. Joylashuvi yoki qurilmasidan qat'i nazar, hamma uchun ochiq bo'lgan animatsiyalar yaratish uchun foydalanish imkoniyatlari, ishlash samaradorligi va kross-brauzer mosligiga ustunlik berishni unutmang.

Ushbu qo'llanmada keltirilgan eng yaxshi amaliyotlarga rioya qilish va yangi texnikalar bilan doimiy ravishda tajriba o'tkazish orqali dasturchilar global auditoriyaga mos keladigan haqiqatan ham ajoyib veb-tajribalarni yaratish uchun CSS keyframes kuchidan foydalanishlari mumkin. Animatsiya kuchini qabul qiling va veb-saytlaringizning jonlanishini kuzating!