CSS Animation Range: Skroll bilan boshqariladigan animatsiyalarni chuqur o'rganish

Ko'p yillar davomida foydalanuvchining skroll holatiga javob beradigan animatsiyalarni yaratish jozibador veb-tajribalarning asosiy tamali bo'lib kelgan. Mayin paydo bo'lishdan tortib murakkab parallaks effektlarigacha, bu o'zaro ta'sirlar statik sahifalarga jon bag'ishlaydi. Biroq, ular an'anaviy ravishda jiddiy kamchilik bilan kelgan: JavaScript'ga bog'liqlik. Skroll hodisalarini tinglaydigan kutubxonalar va maxsus skriptlar samaradorlikni talab qilishi mumkin, ular asosiy tredda (main thread) ishlaydi va ayniqsa kam quvvatli qurilmalarda notekis, javob bermaydigan foydalanuvchi tajribasiga olib kelishi mumkin.

Veb-animatsiyaning yangi davriga xush kelibsiz. CSS'dagi so'nggi yutuqlar bizning bu o'zaro ta'sirlarni boshqarish usulimizni inqilob qilmoqda. Scroll-Driven Animations (Skroll bilan boshqariladigan animatsiyalar) spetsifikatsiyasi animatsiyalarni to'g'ridan-to'g'ri skrollbar holatiga yoki elementning ko'rish oynasidagi ko'rinishiga bog'lash uchun kuchli, deklarativ va yuqori samarali usulni taqdim etadi — barchasi bir satr ham JavaScript'siz.

Ushbu yangi paradigmaning markazida ikkita asosiy xususiyat yotadi: animation-timeline va animation-range. animation-timeline animatsiyani nima boshqarishini (masalan, hujjatning skrollbari) belgilab, sahnani tayyorlasa, animation-range biz har doim orzu qilgan nozik boshqaruvni ta'minlaydi. U bizga ushbu vaqt jadvali ichida animatsiyaning aniq boshlanish va tugash nuqtalarini belgilashga imkon beradi.

Ushbu keng qamrovli qo'llanmada biz CSS Skroll bilan boshqariladigan animatsiyalar dunyosini animation-rangega alohida e'tibor qaratgan holda o'rganamiz. Biz quyidagilarni qamrab olamiz:

• Skroll va Ko'rish Progressi Timeline'larining asosiy tushunchalari.
• animation-range xususiyati va uning sintaksisining batafsil tahlili.
• Progress barlar, paydo bo'lish effektlari va boshqalarni yaratish uchun amaliy, real misollar.
• Samaradorlik, maxsus imkoniyatlar va brauzer mosligi bo'yicha eng yaxshi amaliyotlar.

Nafaqat go'zal, balki aql bovar qilmaydigan darajada samarali bo'lgan, murakkab mantiqni asosiy treddan kompozitor trediga o'tkazib, kafolatlangan silliq ishlashni ta'minlaydigan animatsiyalarni ochishga tayyor bo'ling.

Asoslarni tushunish: Skroll bilan boshqariladigan animatsiyalar nima?

animation-rangeni o'rganishdan oldin, uning qaysi tizimda ishlashini tushunish juda muhim. An'anaga ko'ra, CSS animatsiyalari vaqtga asoslangan vaqt jadvaliga bog'langan. Siz animation-duration: 3s; deb belgilaganingizda, animatsiya soatga asoslanib, uch soniya davomida 0% dan 100% gacha rivojlanadi.

Skroll bilan boshqariladigan animatsiyalar buni tubdan o'zgartiradi. Ular vaqtga emas, balki progressga asoslangan Progress Timeline (Progress Vaqt Jadvali) tushunchasini kiritadi — bu konteynerni skroll qilish progressi yoki elementning ko'rish oynasi orqali harakatlanayotganda uning ko'rinish progressi bo'lishi mumkin.

Ushbu yangi model uchta katta afzallikni taqdim etadi:

1. Samaradorlik: Bu animatsiyalar brauzerning kompozitor tredida asosiy treddan tashqarida ishga tushirilishi mumkinligi sababli, ular JavaScript, layout yoki paint operatsiyalari bilan resurslar uchun raqobatlashmaydi. Natijada, JS-ga asoslangan skroll tinglovchilari ko'pincha duch keladigan notekislikdan xoli, juda silliq animatsiya olinadi.
2. Oddiylik: CSS sintaksisi deklarativdir. Siz nima sodir bo'lishini xohlayotganingizni aytasiz va brauzer murakkab hisob-kitoblarni o'zi bajaradi. Bu ko'pincha imperativ JavaScript'ga nisbatan toza va qo'llab-quvvatlash osonroq kodga olib keladi.
3. Maxsus imkoniyatlar: Animatsiyalar prefers-reduced-motion kabi foydalanuvchi afzalliklarini avtomatik ravishda hurmat qiladi, bu esa inklyuziv tajribalarni yaratishni osonlashtiradi.

Siz ishlaydigan progress timeline'larining ikkita asosiy turi mavjud:

• Scroll Progress Timeline (Skroll Progressi Vaqt Jadvali): Skroll konteyneri ("scroller") ichidagi skroll holatini kuzatadi. Vaqt jadvali butun skroll qilinadigan diapazonni, eng yuqoridan (0%) eng pastgacha (100%) ifodalaydi.
• View Progress Timeline (Ko'rish Progressi Vaqt Jadvali): Elementning ko'rish oynasini kesib o'tayotgandagi ko'rinishini kuzatadi. Vaqt jadvali elementning ko'rish oynasiga kirishidan to undan to'liq chiqib ketishigacha bo'lgan yo'lini ifodalaydi.

Asosiy Konseptsiya: `animation-timeline` Xususiyati

Skroll bilan boshqariladigan animatsiyani yaratishdagi birinchi qadam standart CSS animatsiyasini uning standart vaqtga asoslangan soatidan ajratib, yangi progressga asoslangan vaqt jadvaliga biriktirishdir. Bu animation-timeline xususiyati yordamida amalga oshiriladi.

U vaqt jadvalining manbasini belgilaydigan funksiyani qabul qiladi: Scroll Progress Timeline uchun scroll() yoki View Progress Timeline uchun view().

Scroll Progress Timeline: `scroll()`

scroll() funksiyasi animatsiyani konteynerning skroll holatiga bog'laydi. Uning eng keng tarqalgan shakli scroll(scroller, axis).

• scroller: Qaysi skroll elementini kuzatishni belgilaydi. U root (hujjatning ko'rish oynasi), self (elementning o'zi, agar u skroller bo'lsa) yoki nearest (eng yaqin ota-ona skroller) bo'lishi mumkin.
• axis: Qaysi skroll o'qini kuzatishni belgilaydi. U block (kontent oqimining asosiy yo'nalishi, odatda vertikal), inline (block'ga perpendikulyar, odatda gorizontal), y yoki x bo'lishi mumkin.

Misol: Sahifa skrolli uchun oddiy progress bar

Keling, foydalanuvchi pastga skroll qilganda o'sib boradigan sahifaning yuqori qismida progress bar yarataylik.

            <!-- HTML -->
<div id="progress-bar"></div>

<!-- CSS -->
@keyframes grow-progress {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

#progress-bar {
  position: fixed;
  top: 0;
  left: 0;
  height: 10px;
  width: 100%;
  background-color: dodgerblue;
  transform-origin: left;

  /* Vaqtdan ajratib, sahifa skrolliga bog'lash */
  animation: grow-progress linear;
  animation-timeline: scroll(root block);
}
            

              
                Copy
              
            
          

Ushbu misolda, grow-progress animatsiyasi endi asosiy hujjatni (root) uning vertikal o'qida (block) skroll qilish bilan boshqariladi. Sahifaning 0% dan 100% gacha skroll qilganingizda, progress barning scaleX o'zgarishi 0 dan 1 gacha o'zgaradi.

View Progress Timeline: `view()`

view() funksiyasi animatsiyani elementning o'z skrolleri ichidagi ko'rinishiga bog'laydi. Bu elementlar ko'rinishga kelganda "paydo bo'lish" animatsiyalarini ishga tushirish uchun juda foydali.

Uning sintaksisi view(axis, inset).

• axis: Ixtiyoriy, scroll() dagi kabi qiymatlar (masalan, block). Skrollportning qaysi o'qini hisobga olishni belgilaydi.
• inset: Ixtiyoriy, IntersectionObserver ning rootMarginiga o'xshab, ko'rinishni hisoblash uchun ishlatiladigan ko'rish oynasi chegaralarini sozlash imkonini beradi.

Misol: Elementni paydo qilish

            <!-- HTML -->
<div class="content-box reveal">
  Bu quti ekranga kirganda paydo bo'ladi.
</div>

<!-- CSS -->
@keyframes fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.reveal {
  /* Animatsiyani ushbu elementning ko'rinishiga bog'lash */
  animation: fade-in linear;
  animation-timeline: view();
}
            

              
                Copy
              
            
          

Bu yerda, fade-in animatsiyasi .reveal elementining o'ziga bog'langan. Animatsiya element ko'rish oynasi bo'ylab harakatlanar ekan, progressga erishadi. Lekin u aynan qanday bog'lanadi? Qachon boshlanadi va tugaydi? Aynan shu yerda animation-range ishga tushadi.

Sahnaning yulduzi: `animation-range`

animation-timeline kontekstni o'rnatsa, animation-range muhim boshqaruvni ta'minlaydi. U vaqt jadvalining qaysi qismi "faol" deb hisoblanishini belgilaydi va uni sizning @keyframes animatsiyangizning 0% dan 100% gacha bo'lgan progressiga bog'laydi.

Asosiy sintaksis:

            animation-range: <range-start> <range-end>;
            

              
                Copy
              
            
          

Bu brauzerga shunday deydi: "Vaqt jadvali <range-start> nuqtasiga yetganda, animatsiya 0% da bo'lishi kerak. U <range-end> nuqtasiga yetganda, animatsiya 100% da bo'lishi kerak."

<range-start> va <range-end> uchun qiymatlar bir necha turdagi bo'lishi mumkin:

• Kalit so'zlar (view() uchun): entry, exit, cover va contain kabi maxsus, juda intuitiv nomlar. Biz ularni batafsil o'rganamiz.
• Foizlar: Umumiy vaqt jadvali davomiyligining foizi. scroll() vaqt jadvali uchun 0% eng yuqori va 100% eng past qismidir.
• CSS Uzunliklari: 100px yoki 20rem kabi qat'iy uzunlik qiymati. Bu vaqt jadvalining boshidan ushbu skroll siljishidagi nuqtani belgilaydi.

Siz hatto entry 50% yoki cover 200px kabi o'ta nozik boshqaruv uchun kalit so'zlarni foizlar yoki uzunliklar bilan birlashtirishingiz mumkin.

`scroll()` Timeline'lari bilan `animation-range`ni amalda chuqur o'rganish

scroll() timeline bilan ishlaganda, siz animatsiyangizni skrollerning umumiy skroll diapazoniga bog'laysiz. Keling, animation-range bizga ushbu sayohatning ma'lum qismlarini nishonga olishda qanday yordam berishini ko'rib chiqaylik.

Ma'lum bir skroll qismini nishonga olish

Tasavvur qiling, sizda uzun maqola bor va siz ma'lum bir grafik faqat foydalanuvchi sahifaning o'rta yarmidan skroll qilayotganda animatsiya bo'lishini xohlaysiz.

            @keyframes spin-and-grow {
  from { transform: rotate(0deg) scale(0.5); opacity: 0; }
  to   { transform: rotate(360deg) scale(1); opacity: 1; }
}

.special-graphic {
  animation: spin-and-grow linear;
  animation-timeline: scroll(root block);

  /* Animatsiya 25% skrollda boshlanib, 75% skrollda tugaydi */
  animation-range: 25% 75%;
}
            

              
                Copy
              
            
          

Bu qanday ishlaydi:

• Foydalanuvchi sahifaning 25% qismini skroll qilmasdan oldin, animatsiya o'zining 0% holatida ushlab turiladi (rotate(0deg) scale(0.5) opacity: 0).
• Foydalanuvchi 25% belgidan 75% belgiga qadar skroll qilganda, animatsiya 0% dan 100% gacha rivojlanadi.
• Foydalanuvchi 75% belgidan o'tib skroll qilgandan so'ng, animatsiya o'zining 100% holatida ushlab turiladi (rotate(360deg) scale(1) opacity: 1).

animation-range ning bu oddiy qo'shimchasi bizga kattaroq skroll tajribasi ichida effektlarimizning vaqti va joylashuvi ustidan kuchli nazoratni beradi.

Mutlaq uzunliklardan foydalanish

Siz mutlaq uzunliklardan ham foydalanishingiz mumkin. Masalan, agar siz animatsiya faqat skrollning birinchi 500 pikselida sodir bo'lishini xohlasangiz:

            .hero-animation {
  animation: fade-out linear;
  animation-timeline: scroll(root block);

  /* Animatsiya 0px skroll siljishida boshlanib, 500px da tugaydi */
  animation-range: 0px 500px;
}
            

              
                Copy
              
            
          

Bu sahifaning yuqori qismidagi kirish animatsiyalari uchun juda mos keladi, ular foydalanuvchi kontentning chuqurroq qismiga o'tishni boshlagandan so'ng yakunlanishi kerak.

`view()` Timeline'lari bilan `animation-range`ni mukammal o'zlashtirish

Aynan shu yerda animation-range haqiqatan ham sehrli bo'ladi. view() timeline bilan ishlatilganda, diapazon qiymatlari butun hujjatning skroll balandligiga emas, balki elementning ko'rish oynasi ichidagi ko'rinishiga asoslanadi. Bu yerda maxsus nomlangan diapazonlar o'yinga kiradi.

Nomlangan diapazonlar tushuntirildi

Bir element ("sub'ekt") va ko'rish oynasini ("skroller") tasavvur qiling. Nomlangan diapazonlar ushbu ikki quti o'rtasidagi munosabatni tavsiflaydi.

• entry: Sub'ektning ko'rish oynasiga kirish bosqichi. U sub'ektning pastki chekkasi ko'rish oynasining yuqori chekkasini kesib o'tgan paytda boshlanadi va sub'ektning pastki chekkasi ko'rish oynasining pastki chekkasini kesib o'tganda tugaydi.
• exit: Sub'ektning ko'rish oynasidan chiqish bosqichi. U sub'ektning yuqori chekkasi ko'rish oynasining yuqori chekkasini kesib o'tgan paytda boshlanadi va sub'ektning yuqori chekkasi ko'rish oynasining pastki chekkasini kesib o'tganda tugaydi.
• cover: Sub'ekt ko'rish oynasini to'liq qoplash uchun yetarlicha katta bo'lgan bosqich. U sub'ektning yuqori chekkasi ko'rish oynasining yuqori chekkasiga tekkan paytda boshlanadi va sub'ektning pastki chekkasi ko'rish oynasining pastki chekkasiga tekkan paytda tugaydi. Agar sub'ekt ko'rish oynasidan kichikroq bo'lsa, bu bosqich hech qachon sodir bo'lmaydi.
• contain: Sub'ektning ko'rish oynasi ichida to'liq joylashgan bosqichi. U sub'ektning pastki chekkasi ko'rish oynasining pastki chekkasiga kirganda boshlanadi va sub'ektning yuqori chekkasi ko'rish oynasining yuqori chekkasidan chiqqanda tugaydi. Agar sub'ekt ko'rish oynasidan kattaroq bo'lsa, bu bosqich hech qachon sodir bo'lmaydi.

Amaliy Misol: Klassik "Skrollda paydo bo'lish" effekti

Keling, eng keng tarqalgan skrollga asoslangan animatsiyalardan birini qayta yaratamiz: element ekranga kirganda paydo bo'lib, siljiydigan effekt. An'anaga ko'ra, bu JavaScript'da Intersection Observer'ni talab qilar edi. Endi esa bu bir necha satr CSS.

            <!-- HTML -->
<section>
  <div class="content-box reveal">1-quti</div>
  <div class="content-box reveal">2-quti</div>
  <div class="content-box reveal">3-quti</div>
</section>

<!-- CSS -->
@keyframes fade-and-slide-in {
  from { opacity: 0; transform: translateY(50px); }
  to   { opacity: 1; transform: translateY(0); }
}

.reveal {
  animation: fade-and-slide-in linear both; /* 'both' muhim! */
  animation-timeline: view();

  /* Animatsiyani element kirganda boshlash, kirishning yarmida tugatish */
  animation-range: entry 0% entry 50%;
}

            

              
                Copy
              
            
          

Keling, ushbu animation-range qiymatini tahlil qilamiz:

• animation-fill-mode: both; juda muhim. Bu animatsiyaning faol diapazonidan oldin element o'zining from holatida (ko'rinmas va pastga siljigan), va diapazondan keyin o'zining to holatida (to'liq ko'rinadigan va joyida) qolishini ta'minlaydi.
• entry 0%: Boshlanish nuqtasi. Bu entry bosqichining eng boshiga ishora qiladi — elementimizning pastki qismi ko'rish oynasining pastki qismiga tekkan aniq lahza.
• entry 50%: Tugash nuqtasi. Bu element entry bosqichi bo'ylab o'z sayohatining 50% ni yakunlagan lahzaga ishora qiladi. Shu nuqtaga kelib, animatsiya 100% tugallangan bo'ladi.

Bu foydalanuvchi elementni ekran markaziga skroll qilishidan ancha oldin uning to'liq ko'rinadigan va o'zining yakuniy holatida bo'lishini ta'minlaydigan yoqimli effekt beradi. Siz xohlagan aniq hissiyotni olish uchun bu foizlarni o'zgartirishingiz mumkin. Masalan, entry 25% entry 75% yanada cho'zilgan animatsiya yaratadi.

Ilg'or Boshqaruv: Parallaks Effektini Yaratish

Keling, murakkabroq effektni sinab ko'raylik. Biz fon rasmini skrolldan farqli tezlikda harakatlanadigan qilamiz, lekin faqat uning konteyneri ko'rish oynasini qoplab turgan vaqtda.

            <!-- HTML -->
<div class="parallax-container">
  <div class="parallax-bg"></div>
  <h2>Parallaks Bo'limi</h2>
</div>

<!-- CSS -->
@keyframes parallax-shift {
  from { background-position: 50% -50px; }
  to   { background-position: 50% 50px; }
}

.parallax-container {
  position: relative;
  height: 100vh;
  overflow: hidden;
}

.parallax-bg {
  position: absolute;
  inset: -50px; /* Harakatga imkon berish uchun konteynerdan balandroq qilish */
  background-image: url('your-image.jpg');
  background-size: cover;

  animation: parallax-shift linear both;
  animation-timeline: view(block);
  /* Butun 'cover' bosqichi davomida animatsiya qilish */
  animation-range: cover 0% cover 100%; 
}

            

              
                Copy
              
            
          

Bu holda, parallax-shift animatsiyasi parallax-bg elementining timeline'iga bog'langan. animation-range cover bosqichining to'liq davomiyligiga o'rnatilgan. Bu shuni anglatadiki, animatsiya faqat konteyner ko'rish oynasini qoplash uchun yetarlicha baland bo'lganda va uning yuqori qismi ko'rish oynasining yuqori qismida joylashganda progressga erisha boshlaydi. U konteynerning pastki qismi ko'rish oynasining pastki qismiga yetganda tugaydi. Natija - skroll holatiga mukammal sinxronlashtirilgan silliq, samarali parallaks effekti.

Barchasini birlashtirish: Qisqartmalar va Eng Yaxshi Amaliyotlar

`animation` Qisqartmasi

Sintaksisni yanada ixcham qilish uchun timeline va range xususiyatlari to'g'ridan-to'g'ri animation qisqartma xususiyatiga kiritilishi mumkin. Bu yangi, taklif etilayotgan va qo'llab-quvvatlanishga erishayotgan sintaksis.

Bizning skrollda paydo bo'lish misolimiz quyidagicha qayta yozilishi mumkin:

            .reveal {
  animation: fade-and-slide-in linear both view() entry 0% entry 50%;
}
            

              
                Copy
              
            
          

Bu yagona satr uchta alohida animation, animation-timeline va animation-range xususiyatlarining o'rnini bosadi. Bu toza, samarali va barcha animatsiya mantiqini bir joyda saqlaydi.

Samaradorlikka oid mulohazalar

Skroll bilan boshqariladigan animatsiyalarning asosiy afzalligi samaradorlikdir. Ushbu afzallikni saqlab qolish uchun siz kompozitor tredi tomonidan boshqarilishi mumkin bo'lgan xususiyatlarni animatsiya qilishga ustunlik berishingiz kerak. Bular asosan:

• transform (translate, scale, rotate)
• opacity

width, height, margin yoki color kabi xususiyatlarni animatsiya qilish ham ishlaydi, lekin ular asosiy tredda sodir bo'ladigan layout va paint operatsiyalarini ishga tushirishi mumkin. Garchi JS-ga asoslangan muqobillardan ko'ra silliqroq bo'lsa-da, ular faqat kompozitorda ishlaydigan animatsiyalar kabi samarali bo'lmaydi.

Maxsus imkoniyatlar va Muqobil yechimlar

Barcha foydalanuvchilar uchun yaratish juda muhim. Skroll bilan boshqariladigan animatsiyalar ajoyib, lekin ba'zi foydalanuvchilar harakatni chalg'ituvchi yoki ko'ngilni aynatuvchi deb bilishadi.

1. Foydalanuvchi afzalliklarini hurmat qiling: Har doim harakat bilan bog'liq CSS'ingizni prefers-reduced-motion media so'rovi ichiga o'rang.

            @media (prefers-reduced-motion: no-preference) {
  .reveal {
    animation: fade-and-slide-in linear both;
    animation-timeline: view();
    animation-range: entry 0% entry 50%;
  }
}
            

              
                Copy
              
            
          

2. Eski brauzerlar uchun muqobil yechimlar taqdim eting: Bu yangi texnologiya bo'lgani uchun, uni hali qo'llab-quvvatlamaydigan brauzerlarni hisobga olishingiz kerak. @supports qoidasi bu borada sizning eng yaxshi do'stingizdir. Oddiy, animatsiyasiz standart holatni taqdim eting va keyin uni qo'llab-quvvatlaydigan brauzerlar uchun yaxshilang.

            /* Barcha brauzerlar uchun standart holat */
.reveal {
  opacity: 1;
  transform: translateY(0);
}

/* Qo'llab-quvvatlaydigan brauzerlar uchun yaxshilanish */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .reveal {
      opacity: 0; /* Animatsiya uchun boshlang'ich holatni o'rnatish */
      transform: translateY(50px);
      animation: fade-and-slide-in linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 50%;
    }
  }
}

            

              
                Copy
              
            
          

Brauzerlarda qo'llab-quvvatlanishi va Kelajakdagi istiqbollar

2023 yil oxiriga kelib, CSS Skroll bilan boshqariladigan animatsiyalar Chrome va Edge'da qo'llab-quvvatlanadi. Ular Firefox'da faol ishlab chiqilmoqda va Safari tomonidan ko'rib chiqilmoqda. Har qanday eng yangi veb-platforma xususiyati singari, eng so'nggi qo'llab-quvvatlash ma'lumotlari uchun CanIUse.com kabi manbalarni tekshirish muhimdir.

Ushbu texnologiyaning joriy etilishi veb-dasturlashda sezilarli o'zgarishni anglatadi. Bu dizaynerlar va dasturchilarga boy, interaktiv va samarali tajribalarni deklarativ ravishda yaratish imkonini beradi, bu esa bizning umumiy UI naqshlarining butun bir sinfi uchun JavaScript'ga bo'lgan ishonchimizni kamaytiradi. Brauzerlarda qo'llab-quvvatlash yetuklashgan sari, skroll bilan boshqariladigan animatsiyalar har bir front-end dasturchining asboblar to'plamida muhim vositaga aylanishini kuting.

Xulosa

CSS Skroll bilan boshqariladigan animatsiyalar va ayniqsa animation-range xususiyati veb-animatsiya uchun ulkan bir qadamni anglatadi. Biz vaqtga asoslangan timeline'lardan progressga asoslangan timeline'larga o'tdik, bu esa misli ko'rilmagan samaradorlik va soddalik bilan murakkab, skrollga sezgir o'zaro ta'sirlarni yaratish imkoniyatini ochdi.

Biz quyidagilarni o'rgandik:

• animation-timeline animatsiyani scroll() yoki view() progress timeline'iga bog'laydi.
• animation-range bizga aniq boshqaruvni beradi, o'sha timeline'ning ma'lum bir qismini animatsiyamizning asosiy kadrlariga bog'laydi.
• view() timeline'lari bilan entry, exit, cover va contain kabi kuchli nomlangan diapazonlar elementning ko'rinishiga asoslangan animatsiyalarni boshqarishning intuitiv usulini taqdim etadi.
• Kompozitorga mos xususiyatlarga rioya qilish va muqobil yechimlarni taqdim etish orqali biz bugun ushbu texnologiyadan maxsus imkoniyatlarga ega, samarali va yoqimli foydalanuvchi tajribalarini yaratish uchun foydalanishimiz mumkin.

Oddiy effektlar uchun notekis, asosiy tredni bloklaydigan skroll tinglovchilari bilan kurashish kunlari sanoqli qoldi. Skrollga asoslangan animatsiyaning kelajagi shu yerda, u deklarativ va u CSS'da yozilgan. Tajriba qilishni boshlash vaqti keldi.