CSS a movimento ridotto
Ferma un’animazione CSS decorativa quando viene richiesto meno movimento.
@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; }
}Progetto
Verifica entrambe le preferenze e il focus da tastiera, conservando il testo di stato quando il movimento è disattivato.
Controlla prima di applicare
Confronta il comportamento effettivo con il risultato atteso. Se una verifica fallisce, indaga la causa prima di altre modifiche.
Modelli
Configura un endpoint compatibile con OpenAI o Anthropic usando URL di base e chiave API, se necessaria. Prova la connessione. Il server locale deve essere in esecuzione; gli strumenti remoti possono trasmettere dati separatamente.
@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; }
}Tratta le preferenze di movimento come parte di una modifica all'interfaccia
MotionHearth è un ambiente di programmazione per Windows per sviluppare modifiche all'interfaccia con un modello IA collegato. Porta la cartella del progetto e descrivi cosa debba comunicare un'interazione. La conversazione può seguire insieme il componente e i suoi stili, aiutandoti a esaminare un'animazione proposta nel contesto dello stato, del focus o del riscontro che deve trasmettere.
Un'attività suggerita da motion.css è esaminare un'animazione quando viene richiesto movimento ridotto. Chiedi come l'interfaccia esistente comunichi le stesse informazioni dopo l'arresto del movimento e se il focus da tastiera resti evidente. Queste domande trasformano l'esempio in una modifica applicativa esaminabile. Mantengono inoltre la richiesta più ampia della semplice eliminazione di un fotogramma chiave, ma abbastanza contenuta da verificarla sullo schermo reale.
Puoi scegliere un modello IA senza restrizioni se il tuo endpoint compatibile con OpenAI o Anthropic supportato ne offre uno. Aggiungi i dettagli di connessione e le credenziali richieste, riconoscendo che capacità e restrizioni appartengono al modello e al server. Esamina le modifiche CSS e ai componenti risultanti prima di verificare l'interfaccia con movimento abilitato e ridotto. Usa la navigazione da tastiera oltre all'input tramite puntatore. L'obiettivo è un comportamento coerente con entrambe le preferenze, supportato da ciò che l'applicazione visualizza anziché dalla sola descrizione dell'assistente.
Verificare insieme movimento e interazione
Cosa deve specificare una richiesta di movimento ridotto?
Indica l'elemento in movimento, le informazioni che comunica e il comportamento alternativo atteso. Includi il componente e il foglio di stile pertinenti. Questo consente alla modifica proposta di preservare riscontri utili invece di rimuovere il movimento senza considerare ciò che gli utenti perdono.
Un'animazione arrestata può nascondere lo stato corrente?
Può accadere se il movimento era l'unico indicatore. Esamina testo, forma o indicatore di stato rimasti quando l'animazione è disabilitata. Chiedi un'alternativa adatta all'interfaccia, poi verifica che rimanga chiara durante tutta l'interazione.
Perché verificare il focus da tastiera durante una modifica al movimento?
Gli stili vicini a un controllo animato possono influenzarne anche l'indicatore di focus. Naviga nella schermata modificata usando la tastiera e conferma quale elemento sia attivo. Esaminare solo i fotogrammi chiave non stabilisce se l'intera interazione resti comprensibile.
Quanto può verificare il modello dai file sorgente?
Può proporre un'interpretazione del codice disponibile nel proprio contesto e con i propri strumenti. Devi comunque esaminare gli stati visualizzati ed eseguire le verifiche del progetto. Considera schermate, stili o condizioni di esecuzione mancanti come limiti della revisione.
MotionHearth · Aggiornato 2026-10-25