Перед началом
Определите, какую информацию передаёт движение. Основное содержание должно быть видно до запуска 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 действительно меняет поведение. Не считайте наличие media-запроса доказательством — включите настройку в браузере.
Где легко ошибиться
Opacity: 0 как постоянное исходное состояние прячет содержание при отказе JavaScript. Начинайте с видимого документа и улучшайте его постепенно.
Источники и продолжение
- W3C — Pause, Stop, Hide
- Простая анимация для сайта средствами CSS — 2009-07-22 (RU)
Схема и примеры: редакция Web Article. Схема объясняет принцип и не является снимком интерфейса или результатом испытания программы.