# Домоглася, щоб режим зменшеного руху працював

Домоглася, щоб режим зменшеного руху справді працював, після того як знайшла одинадцять селекторів, які й далі анімувалися за цього налаштування, бо універсальне правило transition‑none поступається за специфічністю будь‑якому правилу з класом.

серпень 2026

**Ситуація.** Сайт враховував налаштування зменшення руху одним правилом, яке вимикало всі переходи. Воно мало вигляд вичерпного й проходило лінтер без зауважень, але за емульованого налаштування зменшення руху одинадцять селекторів і далі анімувалися.

**Завдання.** Налаштування треба було враховувати насправді, а причину, з якої очевидне правило не спрацювало, — перетворити на те, чого наступна людина вже не зможе повторити.

**Дія.** Причина — у специфічності. Універсальне правило має найнижчу специфічність у каскаді й програє будь‑якому правилу з класом, тож загальне вимкнення переходів поступається кожній продуманій анімації на сторінці, а саме такі анімації й варто вимикати. Виправлення було структурним, а не латкою: усе, що рухається, тепер зібрано в одній частині таблиці стилів, яка підключається наприкінці, а лінтер відхиляє перехід властивості transform будь‑де поза нею. Межу правило проводить свідомо, і вона вужча за очевидну: зменшувати треба рух, а не колір. Плавна зміна кольору — не рух, і якщо її вимкнути, інтерфейс здаватиметься зламаним людям, які про це не просили, тож перехід колірних властивостей перевірку проходить, а перехід руху — ні. Крім того, рух обов'язково задають переходом, а не анімацією з ключовими кадрами, бо перехід скасувати елементарно, а анімацію — ні. Під час тієї самої роботи виявилися ще дві пов'язані пастки, і їх записано з вимірюваннями: оздоба меню встигала пройти тридцять один градус із шістдесятиградусного повороту, перш ніж ставала наполовину видимою, а оскільки форма періодична, пів оберту має такий самий вигляд за третину вартості; а п'ять різних властивостей — кожна окремо — роблять елемент блоком‑контейнером (containing block) для всього, що позиціюється відносно вікна перегляду, і через це шар для закриття (dismiss layer) непомітно зменшився до частки екрана.

**Результат.** Налаштування тепер враховують насправді, а не лише на рівні наміру, і одинадцять активних анімацій, які загальне правило лише нібито охоплювало, тепер справді охоплено. Загальний урок записано на початку того самого документа: правило, що програє за специфічністю, дає збій непомітно, і кожен звіт описує це по‑своєму.

---

- Роль: Інженер дизайн‑систем
- Категорії: [Frontend‑розробка](https://engineer.company/uk/categories/frontend/), [Веброзробка](https://engineer.company/uk/categories/web-development/), [Тестування та QA](https://engineer.company/uk/categories/testing/), [Дизайн‑системи та UI](https://engineer.company/uk/categories/design-systems/), [UX / UI‑дизайн](https://engineer.company/uk/categories/ux-ui/)
- Послуги: [Frontend‑розробка](https://engineer.company/uk/services/frontend-development/), [Розробка вебсайтів та CMS](https://engineer.company/uk/services/web-development/), [UI/UX‑дизайн та дизайн‑системи](https://engineer.company/uk/services/ui-ux-design/)

<https://engineer.company/uk/portfolio/made-the-reduced-motion-setting-honest/>
