prefers-reduced-motion va harakat etikasi: animatsiyani to'g'ri kamaytirish

Qisqacha: Ekrandagi harakat ba'zi odamlarda bosh aylanishi, ko'ngil aynishi yoki migren qo'zg'atadi. Ular tizimda "harakatni kamaytirish" sozlamasini yoqadi, CSS esa uni @media (prefers-reduced-motion: reduce) bilan o'qiydi. To'g'ri yo'l — harakatni faqat no-preference ichida qo'shish (no-motion-first). Kamaytirilgan rejimda esa harakat butunlay o'chirilmaydi — yumshoq o'tish (masalan, opacity) bilan almashtiriladi. animation: none element yakuniy holatini ham o'chirib yuborishi mumkin — ehtiyot bo'ling.

Bu darsda

• Harakat kimga va qanday zarar berishini, WCAG buni qaysi mezonlarda talab qilishini tushuntira olasiz.
• Har animatsiyani no-motion-first uslubida yoza olasiz.
• Kamaytirilgan rejim uchun "o'chirish" o'rniga "almashtirish"ni tanlay olasiz.
• animation: none va qisqa davomiylik farqini bilasiz, forwards tuzog'idan qochasiz.
• Parallaks, avto-karusel, GIF va video bilan bog'liq xavflarni bartaraf eta olasiz.

Oldin bilishingiz kerak: Foydalanuvchi afzalliklari va qurilma medialari, @keyframes va animation, Transition, Rendering pipeline va animatsiya samaradorligi.

1. Nega bu kerak?

Foydalanuvchi afzalliklari darsidagi Sardorni eslang. Sahifada nimadir sakrasa yoki sirg'alsa, uning boshi og'riydi. U telefonda "harakatni kamaytirish" sozlamasini yoqqan.

Endi Sardor «Bahor» saytini ochdi. Kirishda sarlavha pastdan uchib chiqadi, fondagi rasm skroll bilan boshqa tezlikda suzadi, aksiya banneri o'z-o'zidan aylanib turadi. Uch soniyadan keyin Sardor telefonni qo'yib, ko'zini yumadi. U buyurtma bermaydi va saytga qaytmaydi.

O'sha dars harakatni faqat no-preference ichida qo'shish tamoyilini bergan edi va "animatsiyalarni 06-qismda o'rganamiz" degandi. Endi animatsiya yozishni bilasiz — tamoyilni to'liq ochish vaqti keldi. Kontent accessibility'si darsida ham "operatsion tizimda harakatni kamaytirish sozlamasi bor, sayt uni hurmat qilishi kerak" degan edik.

Bu darsda harakat bilan ishlashning axloqini — harakat etikasini o'rganamiz: qachon harakat foyda beradi, qachon zarar va zararini qanday olib tashlash kerak.

2. Harakat kimga zarar beradi?

2.1 Ichki quloq va ko'z kelishmasa

Muvozanatni ichki quloqdagi vestibulyar tizim boshqaradi. Ko'z "hamma narsa suzyapti" desa-yu, ichki quloq "biz joyimizda o'tiribmiz" desa, miya adashadi. Natija — dengiz kasalligiga o'xshash holat: bosh aylanishi, ko'ngil aynishi, ba'zan bir necha soatlik bosh og'rig'i.

Buni vestibulyar buzilishi bor odamlar, migrendan aziyat chekadiganlar, bosh jarohati olganlar va ko'p keksalar sezadi. Ular uchun "chiroyli effekt" — jismoniy og'riq.

2.2 Eng xavfli harakatlar

• Katta masofadagi siljish — ekranning yarmidan uchib kiradigan blok.
• Kattalashish va kichrayish (zoom) — butun ekranni to'ldirib kattalashadigan rasm.
• Parallaks — skroll qilganda fon va kontent turli tezlikda suzadi.
• Aylanish — spiral, aylanib turuvchi fon.
• O'z-o'zidan harakat — foydalanuvchi so'ramagan avto-karusel, yuguruvchi satr.

Kichik harakatlar — tugma rangining o'zgarishi, bir soniyalik shaffoflashish — odatda zararsiz.

2.3 Boshqa ikki xavf

• Miltillash. Soniyasiga 3 martadan ko'p miltillaydigan narsa yorug'likka sezgir epilepsiyasi (fotosensitiv epilepsiya) bor odamda tutqanoq qo'zg'atishi mumkin. Bu hayot uchun xavfli — sozlamaga qaramay, hech kimga ko'rsatilmaydi.
• Diqqatni o'g'irlash. Doim harakatlanadigan element diqqati tez tarqaladigan odamga matnni o'qishga xalaqit beradi.

2.4 WCAG nima deydi

Kontent accessibility'si darsida ikki mezonni ko'rgan edik, uchinchisi — bugungi:

2.3.3 — eng yuqori (AAA) daraja, ko'p saytlar undan talab qilmaydi. Lekin uni bajarish @media ning bir necha qatori — qilmaslikka sabab yo'q.

Tekshirib ko'ring: «Bahor» saytida uchta harakat bor: tugma hover'da rangini o'zgartiradi, bosh sahifadagi rasm skroll bilan parallaks qiladi, taom kartasi 2 piksel ko'tariladi. Qaysi biri Sardor uchun eng xavfli?

3. prefers-reduced-motion ni o'qish

3.1 Qiymatlar va sozlamalar

@media (prefers-reduced-motion: reduce) {
  /* foydalanuvchi kamroq harakat so'radi */
}

@media (prefers-reduced-motion: no-preference) {
  /* foydalanuvchi hech narsa so'ramagan */
}

Ikkita qiymat bor: reduce va no-preference. Baseline ma'lumotiga ko'ra bu media feature 2020-yildan Baseline, keng tarqalgan.

Foydalanuvchi uni tizimda yoqadi:

3.2 DevTools'da sinash

Tizim sozlamasini har safar o'zgartirish shart emas. Chrome'da Ctrl + Shift + P → "Show Rendering" → Emulate CSS media feature prefers-reduced-motion → reduce. Sahifa darhol "Sardor ko'zi" bilan ochiladi. Buni Foydalanuvchi afzalliklari darsida ko'rgan edingiz.

4. Ikki yondashuv

4.1 Avval harakat, keyin "o'chirish"

Ko'p saytlar shunday yozadi:

.taom-karta {
  transition: translate 0.2s ease-out;
}
.taom-karta:hover {
  translate: 0 -4px;
}

@media (prefers-reduced-motion: reduce) {
  .taom-karta {
    transition: none;
  }
  .taom-karta:hover {
    translate: none;
  }
}

Ishlaydi. Lekin ikki kamchiligi bor:

• Har yangi animatsiya uchun "o'chirish" qismini eslab yozish kerak. Unutsangiz — Sardor harakatni ko'radi.
• Harakat ikki joyda yashaydi: qo'shildi va olib tashlandi. Kod ikki barobar.

4.2 No-motion-first: avval harakatsiz

Foydalanuvchi afzalliklari darsida tanlagan yo'l:

.taom-karta:hover {
  border-color: #b4461a; /* javob — harakatsiz ham bor */
}

@media (prefers-reduced-motion: no-preference) {
  .taom-karta {
    transition: translate 0.2s ease-out;
  }
  .taom-karta:hover {
    translate: 0 -4px;
  }
}

No-motion-first — odatiy holat harakatsiz, harakat esa faqat "foydalanuvchi qarshi emas" bo'lsa qo'shiladi. Mobile-first'ning (Mobile-first) harakatdagi egizagi: asos — oddiy, qo'shimcha — shart bilan.

Afzalliklari:

• Unutish xavfi yo'q: @media blokidan tashqarida yozilgan harakat umuman bo'lmaydi.
• Juda eski brauzer prefers-reduced-motion ni bilmasa, blokni tashlab ketadi — foydalanuvchi harakatsiz, lekin to'liq ishlaydigan sahifa oladi.
• Kodni o'qigan odam darhol ko'radi: "bu — ixtiyoriy harakat".

Kursda bundan buyon hamma harakat shu uslubda yoziladi.

4.3 Bir faylda tartib

Katta faylda har komponent yonida alohida @media yozish ham mumkin, oxirida bitta "Harakat" bo'limi ham. Ikkalasi to'g'ri. «Bahor»da komponent yonida yozamiz — karta haqidagi hamma narsa bir joyda. Ichma-ich yozish bilan bu yanada qulay bo'ladi (Native CSS nesting darsida).

Tekshirib ko'ring: Hamkasbingiz yangi bannerga animation: aylan 2s infinite qo'shdi va uni hech qanday @media ichiga olmadi. Fayl no-motion-first uslubida. Sardor nimani ko'radi?

5. O'chirish emas — almashtirish

5.1 Harakat ma'lumot beradi

Animatsiya ko'pincha ma'no tashiydi: "bu panel o'ngdan chiqdi — yopsangiz o'ngga qaytadi", "yangi xabar keldi". Uni butunlay olib tashlasangiz, ma'no ham yo'qoladi: element "birdan" paydo bo'ladi va foydalanuvchi nima o'zgarganini sezmay qolishi mumkin.

reduce — "hech narsa bo'lmasin" emas, "sirg'alish, sakrash va aylanish bo'lmasin" degani. Yechim — harakatni harakatsiz o'tish bilan almashtirish:

Har yangi animatsiya uchun qarorni shunday qabul qilasiz:

flowchart TD
  A["Yangi animatsiya"] --> B{"Ma'lumot beradimi?"}
  B -->|"yo'q, bezak"| C["reduce: olib tashlang"]
  B -->|"ha"| D{"Joy yoki o'lcham<br/>o'zgaradimi?"}
  D -->|"ha"| E["reduce: opacity bilan<br/>almashtiring"]
  D -->|"yo'q, rang yoki xiralik"| F["Hamma uchun qoldiring"]

Nimaga qarang: "olib tashlash" faqat bezakka tegishli. Ma'lumot beradigan harakat hech qachon yo'qolmaydi — faqat shakli yumshaydi.

5.2 Ko'rib chiqamiz

<style>
  body { font-family: system-ui, sans-serif; }
  details {
    margin-block: 0.75rem;
    padding: 0.5rem 1rem;
    border: 2px solid #2f6b3a;
    border-radius: 0.5rem;
  }
  summary { font-weight: bold; }
  .aksiya {
    padding: 0.5rem;
    color: #fffaf0;
    background: #b4461a;
  }
  @keyframes uchish {
    from { translate: 0 3rem; scale: 0.6; opacity: 0; }
  }
  @keyframes paydo {
    from { opacity: 0; }
  }
  @media (prefers-reduced-motion: no-preference) {
    .odatiy[open] .aksiya {
      animation: uchish 0.6s ease-out;
    }
  }
  .kamaytirilgan[open] .aksiya {
    animation: paydo 0.4s ease-out;
  }
</style>
<details class="odatiy">
  <summary>Odatiy rejim</summary>
  <p class="aksiya">Bugun ko'k choy — 5 000 so'm!</p>
</details>
<details class="kamaytirilgan">
  <summary>Kamaytirilgan rejim</summary>
  <p class="aksiya">Bugun ko'k choy — 5 000 so'm!</p>
</details>

Nimaga qarang: ikkala sarlavhani navbatma-navbat oching (yopib qayta ochsangiz, animatsiya qaytadan boshlanadi). Birinchisida aksiya pastdan kattalashib uchib chiqadi. Ikkinchisida joyida, yumshoq paydo bo'ladi — harakat yo'q, lekin "yangi narsa chiqdi" degan xabar saqlandi. opacity o'tishi harakat emas, u vestibulyar tizimga ta'sir qilmaydi. Tizimda harakat kamaytirilgan bo'lsa, birinchi blok ham darhol ko'rinadi.

@keyframes uchish da faqat from bor. to yozilmasa, brauzer elementning oddiy holatini oxirgi kadr qiladi (@keyframes darsida ko'rgan edingiz).

5.3 Davomiylik ham muhim

Kamaytirilgan rejimda o'tish qisqaroq bo'lsin: 0.2–0.4 soniya. Uzun, sekin shaffoflashish ham kishini kuttiradi. Va hech qachon cheksiz (infinite) bo'lmasin — faqat yuklash belgisi istisno, uni keyingi darsda ko'ramiz.

Tekshirib ko'ring: Mobil menyu chapdan sirg'alib chiqadi. Kamaytirilgan rejim uchun nimani tanlaysiz: (a) menyu umuman chiqmasin, (b) menyu animatsiyasiz darhol chiqsin, (c) menyu joyida 0.2 soniyada shaffoflikdan paydo bo'lsin?

6. animation: none tuzog'i

6.1 Element g'oyib bo'ldi

Stajyor «Bahor» aksiyasini paydo qilmoqchi. Aksiya boshida ko'rinmas (opacity: 0), animatsiya uni ko'rinadigan qilib, forwards bilan shu holatda qoldiradi. Kamaytirilgan rejim uchun esa animatsiyani o'chirdi. Kamaytirilgan rejimni qo'lda taqlid qilamiz — animation: none ni to'g'ridan-to'g'ri yozamiz:

<style>
  body { font-family: system-ui, sans-serif; }
  @keyframes kirish {
    to { opacity: 1; }
  }
  .aksiya {
    padding: 0.5rem;
    color: #fffaf0;
    background: #b4461a;
    opacity: 0;
    animation: kirish 0.5s ease-out forwards;
  }
  /* reduce holatini taqlid qilyapmiz */
  .kamaytirilgan .aksiya {
    animation: none;
  }
</style>
<p>Oddiy foydalanuvchi:</p>
<div><p class="aksiya">Bugun ko'k choy — 5 000 so'm!</p></div>
<p>Sardor (harakat kamaytirilgan):</p>
<div class="kamaytirilgan">
  <p class="aksiya">Bugun ko'k choy — 5 000 so'm!</p>
</div>

Nimaga qarang: birinchi aksiya paydo bo'ldi, ikkinchisi yo'q — "Sardor" yozuvi ostida bo'sh joy. Chrome'da haqiqiy @media (prefers-reduced-motion: reduce) bilan ham tekshirdik: opacity 0 qoldi. Sababi: elementning o'z holati opacity: 0. Uni 1 ga faqat animatsiya olib chiqardi. Animatsiya o'chdi — element abadiy ko'rinmas.

6.2 To'g'ri yo'l

Qoida: element animatsiyasiz ham to'g'ri yakuniy holatda bo'lsin. Boshlang'ich "ko'rinmas" holatni keyframes'ga ko'chiring:

@keyframes kirish {
  from { opacity: 0; }
}

.aksiya {
  /* opacity: 0 yo'q — oddiy holati ko'rinadigan */
}

@media (prefers-reduced-motion: no-preference) {
  .aksiya {
    animation: kirish 0.5s ease-out;
  }
}

Endi animatsiya bo'lmasa, aksiya shunchaki ko'rinib turadi. forwards ham kerak emas: animatsiya tugagach element o'z oddiy holatiga — ko'rinadiganiga — qaytadi.

6.3 Qisqa davomiylik: "xavfsizlik to'ri"

Ko'p loyihalar CSS faylining boshida shunday umumiy qoida qo'yadi:

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

Bu animatsiyani o'chirmaydi — uni ko'z ilg'amaydigan darajada qisqartiradi (0.01 millisekund). Chrome'da tekshirdik: yuqoridagi xato aksiya shu qoida bilan ko'rinadigan bo'ldi (opacity: 1), chunki animatsiya bir lahzada o'tib, forwards bilan oxirgi kadrda qoldi. JavaScript kutadigan "animatsiya tugadi" hodisasi (animationend, @keyframes darsida tilga olingan) ham chiqadi. none bilan esa u hech qachon chiqmaydi.

Kamchiliklari:

• Hammasini birdek qisqartiradi — biz ataylab qoldirgan yumshoq opacity o'tishlarini ham.
• !important (Kaskad darsidan) — asosli istisno, lekin istisno.
• scroll-behavior — silliq skroll, uni Skroll xulqi darsida o'rganamiz.

Qaror: o'z kodingizni no-motion-first bilan yozing. Xavfsizlik to'rini esa begona kod uchun qo'ying — kutubxona yoki plagin o'z animatsiyasini @media siz qo'shgan bo'lsa.

7. Maxsus holatlar

7.1 Parallaks

Parallaks — eng xavfli harakat. Bunday effekt JavaScript yoki skrollga bog'langan animatsiya bilan yoziladi (Scroll-driven animatsiyalar). Qoida oddiy: kamaytirilgan rejimda parallaks umuman bo'lmaydi, fon joyida turadi. Almashtirish ham kerak emas — fon harakati hech qanday ma'lumot tashimaydi.

7.2 Avto-karusel va yuguruvchi satr

O'z-o'zidan aylanadigan karusel ikki muammo: harakat va boshqaruvni tortib olish. WCAG 2.2.2 bo'yicha 5 soniyadan uzun bo'lsa — to'xtatish tugmasi majburiy, sozlamadan qat'i nazar. Kamaytirilgan rejimda esa avto-aylanish umuman yoqilmasin. Karuselni Karusel darsida quramiz.

7.3 GIF va video

CSS GIF ichidagi harakatni to'xtata olmaydi. Lekin HTML'da picture bor, source esa media atributini oladi:

<picture>
  <source srcset="assets/images/choy-damlash.gif"
          media="(prefers-reduced-motion: no-preference)">
  <img src="assets/images/choy-damlash.jpg"
       alt="Choynakka qaynoq suv quyilmoqda"
       width="480" height="320">
</picture>

Harakat so'ralmagan bo'lsa — GIF, kamaytirilgan bo'lsa — oddiy rasm. Bu yerda ham no-motion-first: asosiy img — harakatsiz.

<video autoplay> ni CSS to'xtatmaydi. Yechim — autoplay qo'ymaslik va controls bilan foydalanuvchiga tanlov berish (video va audio). Fon videosi baribir kerak bo'lsa, uni to'xtatish JavaScript ishi — pastdagi matchMedia bilan.

7.4 JavaScript'da so'rash

Animatsiyani JavaScript boshqarsa (masalan, karusel), u ham sozlamani so'raydi. Hozircha faqat ko'rinishini bilib qo'ying — JavaScript'ni 08-qismdan boshlaymiz, bu kodni Brauzer va DOM darslarida to'liq tushunasiz:

const kamroq = matchMedia("(prefers-reduced-motion: reduce)");

if (!kamroq.matches) {
  // faqat foydalanuvchi qarshi bo'lmasa — avto-aylanishni yoqamiz
}

matchMedia — xuddi CSS'dagi @media savoli, faqat JavaScript'dan. .matches — "shart bajarilyaptimi" (true yoki false).

Tekshirib ko'ring: Nega GIF misolida img ga harakatsiz rasm, source ga GIF qo'yildi, teskarisi emas?

8. Harakat etikasi: yaxshi animatsiyaning uch savoli

Sozlamani hurmat qilish — minimal talab. Undan oldin har animatsiyaga uch savol bering:

1. U nimani tushuntiradi? Panel qayerdan chiqdi, qaysi element o'zgardi, bosish qabul qilindimi. Javob "chiroyli bo'lsin" bo'lsa — ehtimol kerak emas.
2. U foydalanuvchini kuttiradimi? Tugma bosilgach 1 soniyalik "raqs" — har safar 1 soniya yo'qotish. UI animatsiyasi odatda 150–300 ms (Transition darsidagi qoida).
3. U o'z-o'zidan boshlanadimi? Foydalanuvchi so'ramagan harakat — eng ko'p zarar beradigani. U albatta to'xtatiladigan bo'lsin.

Va bitta qat'iy chegara: soniyasiga 3 martadan ko'p miltillash — hech qachon, hech qanday rejimda.

9. Ko'p uchraydigan xatolar

9.1 reduce da hamma narsani o'chirish

reduce blokida hover rangi, fokus halqasi yoki paydo bo'lishning o'zi ham o'chirib yuborilgan. Foydalanuvchi bosganini sezmaydi. Tuzatish: faqat harakatni (translate, scale, rotate, parallaks) olib tashlang, javobni qoldiring.

9.2 animation: none + forwards

«animation: none tuzog'i» bo'limidagi holat: element ko'rinmas qoladi. Tuzatish: boshlang'ich holatni from ga ko'chiring, elementning oddiy holati yakuniy holat bo'lsin.

9.3 Faqat CSS'ni tekshirish

CSS'da hammasi no-preference ichida, lekin kutubxonaning JavaScript karuseli baribir aylanadi. Tuzatish: DevTools'da reduce ni yoqib, sahifani boshidan oxirigacha ko'zdan kechiring — CSS'ni emas, natijani tekshiring.

9.4 "Mening foydalanuvchilarimda bunday odam yo'q"

Sozlamani yoqqan odam sizga aytmaydi — u shunchaki saytdan ketadi. Tuzatish: no-motion-first'ni odat qiling, u deyarli hech narsaga tushmaydi.

10. Mashqlar

1-mashq (oson): Qoldiramizmi, almashtiramizmi?

Kamaytirilgan rejimda har effekt bilan nima qilasiz: qoldirish, almashtirish (nimaga?) yoki olib tashlash?

1. Havola hover'da rangini o'zgartiradi.
2. Bron formasi yuborilgach, "Rahmat!" xabari pastdan sirg'alib chiqadi.
3. Bosh sahifa foni skroll bilan sekinroq suziladi (parallaks).
4. Fokusdagi tugma atrofida halqa paydo bo'ladi.

Ishora: «O'chirish emas — almashtirish» jadvali.

2-mashq (o'rta): No-motion-first'ga o'tkazing

Bu kod "avval harakat, keyin o'chirish" uslubida yozilgan. Uni no-motion-first'ga o'tkazing. Kamaytirilgan rejimda karta ko'tarilmasin, lekin hover'da chegarasi #b4461a bo'lsin (hozir chegara faqat harakat bilan birga o'zgaradi).

.taom-karta {
  border: 2px solid #2f6b3a;
  transition: translate 0.2s, border-color 0.2s;
}
.taom-karta:hover {
  translate: 0 -4px;
  border-color: #b4461a;
}
@media (prefers-reduced-motion: reduce) {
  .taom-karta {
    transition: none;
  }
  .taom-karta:hover {
    translate: none;
    border-color: #2f6b3a;
  }
}

Ishora: harakatsiz qism — @media dan tashqarida, translate va uning transition i — no-preference ichida.

.taom-karta {
  border: 2px solid #2f6b3a;
}
.taom-karta:hover {
  border-color: #b4461a;
}

@media (prefers-reduced-motion: no-preference) {
  .taom-karta {
    transition: translate 0.2s, border-color 0.2s;
  }
  .taom-karta:hover {
    translate: 0 -4px;
  }
}

3-mashq (qiyin): Ko'rinmas xabarni qutqaring

Bron sahifasida shunday kod bor. Sardor "Rahmat!" xabarini umuman ko'rmayapti:

@keyframes chiqish {
  from { opacity: 0; translate: 0 2rem; }
  to { opacity: 1; translate: 0 0; }
}
[role="status"] {
  opacity: 0;
  animation: chiqish 0.5s ease-out 0.2s forwards;
}
@media (prefers-reduced-motion: reduce) {
  [role="status"] {
    animation: none;
  }
}

1. Nega Sardor xabarni ko'rmaydi?
2. Kodni no-motion-first'ga o'tkazing: odatiy rejimda — sirg'alib chiqish, kamaytirilganda — faqat 0.3 soniyalik opacity.
3. Kechikish (0.2s) paytida oddiy foydalanuvchi xabarni bir lahza "to'liq" ko'rib qolmasligi kerak. Buni qanday ta'minlaysiz?

Xabar <p role="status"> ichida — Jonli hududlar darsidagi holat xabari, ekran o'quvchi uni o'zi o'qiydi.

Ishora: «animation: none tuzog'i» bo'limi; kechikish paytidagi holatni animation-fill-mode boshqaradi (@keyframes darsida backwards ni ko'rgan edingiz).

@keyframes chiqish {
  from { opacity: 0; translate: 0 2rem; }
}
@keyframes paydo {
  from { opacity: 0; }
}

[role="status"] {
  animation: paydo 0.3s ease-out backwards;
}

@media (prefers-reduced-motion: no-preference) {
  [role="status"] {
    animation: chiqish 0.5s ease-out 0.2s backwards;
  }
}

4-mashq: Portfolio qadami — harakat auditi

2D transformlar, Transition, @keyframes va Kirish va chiqish animatsiyalari darslarida portfoliongizga harakat qo'shgan bo'lishingiz mumkin. Endi ularni Sardor ko'zi bilan tekshiramiz.

1. asosiy.css da Ctrl + F bilan transition, animation, translate, scale, rotate va transform ni qidiring. Har biri @media (prefers-reduced-motion: no-preference) ichidami?
2. Tashqarida qolganlarini no-motion-first'ga o'tkazing. Harakatsiz qism (rang, chegara, soya opacity si) tashqarida qolsin.
3. opacity: 0 bilan boshlanib, animatsiya bilan ko'rinadigan bo'ladigan element bormi? Bo'lsa — «animation: none tuzog'i» bo'yicha tuzating.
4. DevTools → Rendering → prefers-reduced-motion: reduce. Portfolioning olti sahifasini ochib chiqing: hech narsa sirg'almasin, lekin har hover va fokus javob bersin.

/* Kartalar: kuchli soya faqat hover'da — ko'rinish, harakat emas */
@media (hover: hover) {
  .loyihalar > article:hover::after {
    opacity: 1;
  }
}

/* Harakat — faqat ruxsat bo'lsa (no-motion-first) */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .loyihalar > article::after {
    transition: opacity 0.2s ease-out;
  }
}

11. Real ishda

• Katta kompaniyalar. Apple, GOV.UK va ko'p dizayn tizimlarida harakat qoidalari alohida hujjat: davomiylik, egri chiziq va "reduced motion" varianti har komponent uchun yoziladi. Dizayn tizimlarini Dizayn tokenlari darsida ko'ramiz.
• Kod ko'rigi. "Bu animatsiya no-preference ichidami?" — frontend jamoalaridagi odatiy savol.
• Qonun. Ko'p davlatlarda davlat saytlari va yirik bizneslar WCAG'ga amal qilishi shart. Yevropada Accessibility Act 2025-yildan kuchga kirgan.
• Animatsiya kutubxonalari (GSAP, Motion — kursda keyinroq) ham prefers-reduced-motion ni o'qish usulini beradi — ular ham xuddi shu matchMedia ga tayanadi.
• Intervyuda so'raladi: "prefers-reduced-motion ni qanday qo'llaysiz?", "Harakatni o'chirish bilan almashtirish farqi?", "WCAG'da harakat haqida qaysi mezonlar bor?".

Xulosa

• Harakat — kimgadir jismoniy og'riq: vestibulyar buzilish, migren, epilepsiya, diqqat.
• prefers-reduced-motion: reduce — foydalanuvchi so'rovi; tizimda yoqiladi, DevTools Rendering panelida sinaladi.
• No-motion-first: harakat faqat no-preference ichida — unutish xavfi yo'q.
• O'chirmang — almashtiring: sirg'alish o'rniga opacity, javob va ma'no qolsin.
• animation: none yakuniy holatni yo'qotishi mumkin — oddiy holat doim to'g'ri bo'lsin; begona kod uchun 0.01ms to'ri.
• Parallaks va avto-harakat — kamaytirilgan rejimda umuman yo'q; 3 tadan ko'p miltillash — hech qachon.

Keyingi dars: Micro-interaktsiyalar, loaderlar va skeletonlar — tugma bosilishi, yuklash belgisi va skeleton kabi kichik, lekin foydali animatsiyalarni quramiz.

Manbalar

• MDN: "prefers-reduced-motion", "animation-fill-mode", "Window: matchMedia() method" — developer.mozilla.org
• W3C: "Understanding Success Criterion 2.3.3: Animation from Interactions", "2.2.2: Pause, Stop, Hide", "2.3.1: Three Flashes or Below Threshold" — w3.org/WAI/WCAG22/Understanding
• web.dev: "prefers-reduced-motion: Sometimes less movement is more" — web.dev
• web-features (Baseline ma'lumotlari): "prefers-reduced-motion" — github.com/web-platform-dx/web-features