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; }
}Проєкт
Перевірте обидва значення налаштування й клавіатурний фокус, зберігаючи текст стану після вимкнення руху.
Перевірте перед застосуванням
Порівняйте фактичну поведінку з очікуваним результатом. Якщо перевірка не проходить, з’ясуйте причину перед наступними змінами.
Моделі
Налаштуйте OpenAI-сумісний або Anthropic endpoint із базовою URL-адресою та API-ключем, якщо він потрібен. Перевірте з’єднання. Локальний сервер моделі має працювати; віддалені інструменти можуть окремо передавати дані.
@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