Перед початком
Визначте, яку інформацію передає рух. Основний зміст має бути видимим до запуску JavaScript і за вимкнених анімацій.
Текстове пояснення схеми
Видимий документ → Короткий перехід → Нерухомий режим. Індикатор може один раз з’явитися за 350 мс і залишитися нерухомим. Він не повинен знову зникати, коли відвідувач вибрав зменшений рух.
Як зробити
- Для короткої появи використовуйте transform та opacity без зміни розмірів сусідніх блоків у кожному кадрі. Заздалегідь зарезервуйте місце.
- Додайте prefers-reduced-motion. Нерухомий стан має бути повноцінним, а не порожнім екраном із невидимим змістом. Повторюваному руху потрібна пауза.
- Перевірте клавіатуру, зміну вкладки й вузький екран. У разі помилки скрипту текст і посилання мають залишатися доступними.
.notice { animation: arrive .35s ease-out; }
@keyframes arrive { from { transform: translateY(6px); } to { transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) { .notice { animation: none; } }Розгляньмо приклад
Індикатор може один раз з’явитися за 350 мс і залишитися нерухомим. Він не повинен знову зникати, коли відвідувач вибрав зменшений рух.
Перевірте результат
Немає стрибків висоти, фокус не переміщується несподівано, reduced motion справді змінює поведінку. Наявності правила в коді недостатньо — увімкніть налаштування й перевірте.
Де легко помилитися
Постійне початкове opacity: 0 приховує зміст, якщо JavaScript не працює. Починайте з видимого документа й поступово додавайте поліпшення.
Джерела й продовження
- W3C — Pause, Stop, Hide
- Простая анимация для сайта средствами CSS — 2009-07-22 (RU)
Схема й приклади: редакція Web Article. Схема пояснює принцип і не є знімком інтерфейсу або результатом випробування програми.