CSS cu mișcare redusă
Opriți o animație CSS decorativă când se solicită mișcare redusă.
@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; }
}Proiect
Verificați ambele preferințe și focalizarea tastaturii, păstrând textul de stare când mișcarea este dezactivată.
Verifică înainte de aplicare
Compară comportamentul real cu rezultatul așteptat. Dacă o verificare eșuează, cercetează cauza înainte de alte modificări.
Modele
Configurează un endpoint compatibil OpenAI sau Anthropic cu URL-ul de bază și cheia API, dacă este necesară. Testează conexiunea. Serverul local trebuie să ruleze; instrumentele externe pot transmite date separat.
@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; }
}Tratați preferințele de mișcare ca parte a modificării interfeței
MotionHearth este un spațiu de programare pentru Windows destinat dezvoltării modificărilor interfeței cu un model IA conectat. Aduceți dosarul proiectului și descrieți ce trebuie să comunice o interacțiune. Conversația poate urmări componenta și stilurile sale împreună, ajutându-vă să examinați animația propusă în contextul stării, focalizării sau reacției pe care trebuie să o transmită.
O sarcină sugerată de motion.css este examinarea unei animații când se solicită mișcare redusă. Întrebați cum transmite interfața existentă aceeași informație după oprirea mișcării și dacă focalizarea tastaturii rămâne evidentă. Aceste întrebări transformă exemplul într-o modificare a aplicației pe care o puteți examina. De asemenea, păstrează cererea mai amplă decât simpla ștergere a unui cadru-cheie, dar suficient de mică pentru verificare pe ecranul real.
Puteți alege un model IA fără restricții dacă punctul de acces acceptat, compatibil cu OpenAI sau Anthropic, îl oferă. Adăugați detaliile conexiunii și datele de autentificare necesare, recunoscând că modelului și serverului le aparțin capacitățile și restricțiile. Examinați editările CSS și ale componentelor rezultate înainte de a testa interfața cu mișcarea activată și redusă. Folosiți navigarea prin tastatură și dispozitivele de indicare. Scopul este un comportament coerent pentru ambele preferințe, susținut de ceea ce randează aplicația, nu doar de descrierea asistentului.
Verificarea împreună a mișcării și interacțiunii
Ce trebuie să precizeze o cerere privind mișcarea redusă?
Numiți elementul în mișcare, informația transmisă și comportamentul alternativ așteptat. Includeți componenta și foaia de stil relevante. Astfel, modificarea propusă poate păstra reacțiile utile, în loc să elimine mișcarea fără a considera ce pierd utilizatorii.
O animație oprită poate ascunde starea curentă?
Da, dacă mișcarea era singurul indiciu. Examinați textul, forma sau marcatorul de stare rămase când animația este dezactivată. Cereți o alternativă potrivită interfeței, apoi verificați că rămâne clară pe tot parcursul interacțiunii.
De ce să testez focalizarea tastaturii când modific mișcarea?
Stilurile din apropierea unui control animat pot afecta și indicatorul focalizării sale. Navigați prin ecranul modificat folosind tastatura și confirmați ce element este activ. Examinarea doar a cadrelor-cheie nu stabilește dacă întreaga interacțiune rămâne inteligibilă.
Cât poate verifica modelul din fișierele sursă?
Poate propune o interpretare a codului disponibil în contextul și instrumentele sale. Trebuie în continuare să examinați stările randate și să rulați verificările proiectului. Tratați ecranele, stilurile sau condițiile de execuție lipsă ca limite ale examinării.
MotionHearth · Actualizat 2026-10-25