CSS z ograniczonym ruchem
Zatrzymaj dekoracyjną animację CSS przy żądaniu ograniczonego ruchu.
@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; }
}Projekt
Sprawdź obie preferencje oraz fokus klawiatury, zachowując tekst stanu po wyłączeniu ruchu.
Sprawdź przed zastosowaniem
Porównaj rzeczywiste zachowanie z oczekiwanym wynikiem. Jeśli sprawdzenie się nie powiedzie, wyjaśnij przyczynę przed kolejnymi zmianami.
Modele
Dodaj endpoint zgodny z OpenAI lub Anthropic, podając bazowy URL i klucz API, jeśli jest wymagany. Sprawdź połączenie. Lokalny serwer modelu musi działać; zdalne narzędzia mogą przesyłać dane oddzielnie.
@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; }
}Traktuj preferencje ruchu jako część zmiany interfejsu
MotionHearth to środowisko do kodowania w Windows służące do rozwijania zmian interfejsu z podłączonym modelem AI. Przygotuj folder projektu i opisz, co powinna komunikować interakcja. Rozmowa może śledzić komponent wraz z jego stylami, pomagając ocenić proponowaną animację w kontekście stanu, fokusu lub informacji zwrotnej, którą ma przekazywać.
Jednym z zadań sugerowanych przez motion.css jest przegląd animacji przy żądanym ograniczeniu ruchu. Zapytaj, jak istniejący interfejs przekazuje te same informacje po zatrzymaniu ruchu i czy fokus klawiatury pozostaje widoczny. Te pytania przekształcają przykład w zmianę aplikacji, którą możesz zbadać. Utrzymują też zakres prośby szerszy niż samo usunięcie klatki kluczowej, a zarazem wystarczająco mały, by sprawdzić go na rzeczywistym ekranie.
Możesz wybrać model AI bez ograniczeń, jeśli oferuje go obsługiwany punkt końcowy zgodny z OpenAI lub Anthropic. Dodaj szczegóły połączenia i wymagane dane uwierzytelniające, pamiętając, że możliwości i ograniczenia należą do modelu i serwera. Oceń wynikowe zmiany CSS i komponentu przed testowaniem interfejsu z włączonym oraz ograniczonym ruchem. Użyj nawigacji klawiaturą, a także wskaźnika. Celem jest spójne zachowanie przy obu preferencjach, poparte tym, co renderuje aplikacja, a nie samym opisem asystenta.
Wspólna kontrola ruchu i interakcji
Co powinna określać prośba o ograniczenie ruchu?
Wskaż ruchomy element, przekazywaną informację i oczekiwane zachowanie alternatywne. Dołącz odpowiedni komponent i arkusz stylów. Pozwoli to zachować przydatną informację zwrotną zamiast usunąć ruch bez uwzględnienia tego, co tracą użytkownicy.
Czy zatrzymana animacja może ukryć bieżący stan?
Może, jeśli ruch był jedynym wskaźnikiem. Sprawdź pozostały tekst, kształt lub znacznik stanu po wyłączeniu animacji. Poproś o alternatywę pasującą do interfejsu, a następnie sprawdź, czy pozostaje zrozumiała przez całą interakcję.
Dlaczego testować fokus klawiatury podczas zmiany ruchu?
Style w pobliżu animowanej kontrolki mogą również wpływać na jej wskaźnik fokusu. Przejdź przez zmieniony ekran klawiaturą i potwierdź, który element jest aktywny. Sam przegląd klatek kluczowych nie dowodzi, że pełna interakcja pozostaje zrozumiała.
Ile model może zweryfikować na podstawie plików źródłowych?
Może zaproponować interpretację kodu dostępnego w ramach kontekstu i narzędzi. Nadal musisz sprawdzić wyrenderowane stany i uruchomić kontrole projektu. Traktuj brakujące ekrany, style lub warunki wykonania jako ograniczenia przeglądu.
MotionHearth · Zaktualizowano 2026-10-25