CSS с уменьшенным движением
Движение должно учитывать настройку читателя. MotionHearth — Windows-среда работы с кодом и ИИ для изучения 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; }
}Проект
Проверьте оба значения настройки и клавиатурный фокус, сохраняя текст состояния при отключённом движении.
Проверьте перед применением
Сравните фактическое поведение с ожидаемым. Если проверка не проходит, разберитесь в причине перед следующими изменениями.
Подключение
Базовый URL, учётные данные и доступный сервер.
@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; }
}Учитывайте предпочтения движения при изменении интерфейса
MotionHearth — среда программирования для Windows, позволяющая разрабатывать изменения интерфейса с подключённой моделью ИИ. Добавьте папку проекта и опишите, что должно сообщать взаимодействие. Обсуждение может охватывать компонент вместе с его стилями, помогая проверить предлагаемую анимацию в контексте статуса, фокуса или обратной связи, которые она должна передавать.
Одна из задач на основе motion.css — проверить анимацию при запросе уменьшения движения. Спросите, как интерфейс сообщает те же сведения после остановки движения и остаётся ли заметным клавиатурный фокус. Эти вопросы превращают пример в изменение приложения, которое можно проверить. Они также расширяют запрос за пределы простого удаления ключевого кадра, сохраняя объём достаточно небольшим для проверки на реальном экране.
Можно выбрать модель ИИ без ограничений, если её предлагает ваш поддерживаемый эндпоинт, совместимый с OpenAI или Anthropic. Добавьте параметры подключения и нужные учётные данные, учитывая, что возможности и ограничения принадлежат модели и серверу. Проверьте итоговые правки CSS и компонента до тестирования интерфейса с включённым и уменьшенным движением. Используйте навигацию клавиатурой наряду с указателем. Цель — согласованное поведение при обоих предпочтениях, подтверждённое отображением приложения, а не только описанием помощника.
Совместная проверка движения и взаимодействия
Что указать в запросе об уменьшении движения?
Назовите движущийся элемент, передаваемую им информацию и ожидаемое альтернативное поведение. Добавьте нужные компонент и таблицу стилей. Это позволит правке сохранить полезную обратную связь, а не удалить движение без учёта того, что потеряют пользователи.
Может ли остановленная анимация скрыть текущий статус?
Да, если движение было единственным индикатором. Изучите оставшийся текст, форму или маркер состояния при отключённой анимации. Запросите подходящую интерфейсу альтернативу, затем убедитесь, что она остаётся понятной на всём протяжении взаимодействия.
Зачем проверять клавиатурный фокус при изменении движения?
Стили рядом с анимированным элементом управления могут влиять и на индикатор фокуса. Пройдите изменённый экран с клавиатурой и подтвердите, какой элемент активен. Проверка одних ключевых кадров не устанавливает понятность всего взаимодействия.
Насколько много модель может проверить по исходным файлам?
Она может предложить интерпретацию кода, доступного в пределах её контекста и инструментов. Вам всё равно нужно изучить отображаемые состояния и выполнить проверки проекта. Считайте недостающие экраны, стили и условия выполнения ограничениями анализа.
MotionHearth · Обновлено 2026-10-25