Движение объясняет состояние
Анимация помогает увидеть выбор, появление элемента или завершение действия. Навигация, кнопки и содержание доступны с первого кадра. Размер места под логотип и иллюстрацию резервируется до начала воспроизведения.
Декоративный цикл приостанавливается вне видимой области и в скрытой вкладке. Если пользователь нажал паузу, возвращение к блоку не отменяет его выбор.
Уменьшенное движение
Системный prefers-reduced-motion сообщает предпочтение пользователя. Настройка сайта дополняет его; уменьшенное движение имеет приоритет. Вместо декоративного цикла показывается исходное статичное состояние.
Пауза и уменьшенное движение не скрывают состояние успеха или ошибки. В библиотеке сохраняйте покадровый просмотр и доступ к скачиванию.
Статичное состояние декоративного цикла · CSS
@media (prefers-reduced-motion: reduce) {
.decorative-loop {
animation: none;
transform: none;
}
}Перед выпуском
- Проверьте клавиатуру и видимый фокус на управлении воспроизведением.
- Включите уменьшенное движение в системе и настройках сайта.
- Поставьте цикл на паузу, уйдите из области и вернитесь: пауза сохраняется.
- Не запускайте звук без действия пользователя.