Откройте контекст
Выберите папку проекта и обозначьте нужные файлы или поведение.
Сценарии
Сценарии работы с кодом · CSS с уменьшенным движением
03
Конкретная отправная точка
Остановите декоративную CSS-анимацию при запросе уменьшенного движения. Проверьте оба значения настройки и клавиатурный фокус, сохраняя текст состояния при отключённом движении.
Опишите изменение
Укажите входные данные, ожидаемый результат и границы, которые нужно сохранить.
Изучите работу
Проверьте предлагаемые изменения и команды, прежде чем полагаться на результат.
Проверьте результат
Сравните фактическое поведение с ожидаемым. Если проверка не проходит, разберитесь в причине перед следующими изменениями.
CSS с уменьшенным движением
Конкретная отправная точка
@keyframes mark-slide {
to { transform: translateX(12px); }
}
.motion-mark { animation: mark-slide 1.2s linear infinite; }
.status:focus-visible { outline: 2px solid currentColor; }
@media (prefers-reduced-motion: reduce) {
.motion-mark { animation: none; transform: none; }
}Пример — отправная точка для реального проекта, а не утверждение, что сгенерированный код уже протестирован. Адаптируйте пути, зависимости и ожидаемое поведение к своему приложению.