CSS à mouvements réduits
Arrêtez une animation CSS décorative lorsque la réduction des mouvements est demandée.
@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; }
}Projet
Vérifiez les deux préférences et le focus clavier, en conservant le texte d’état quand le mouvement est désactivé.
Vérifiez avant d’appliquer
Comparez le comportement observé au résultat attendu. Si une vérification échoue, cherchez la cause avant de poursuivre les modifications.
Modèles
Configurez un endpoint compatible OpenAI ou Anthropic avec son URL de base et une clé API si nécessaire. Testez la connexion. Un serveur local doit fonctionner ; les outils distants peuvent transmettre des données séparément.
@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; }
}Intégrer les préférences d’animation aux changements d’interface
MotionHearth est un espace de programmation Windows pour développer des changements d’interface avec un modèle d’IA connecté. Apportez le dossier du projet et décrivez ce qu’une interaction doit communiquer. La conversation peut suivre ensemble le composant et ses styles, afin d’examiner une animation proposée dans le contexte du statut, du focus ou du retour d’information qu’elle doit transmettre.
Une tâche suggérée par motion.css consiste à examiner une animation lorsqu’une réduction des animations est demandée. Demandez comment l’interface existante communique la même information une fois le mouvement arrêté, et si le focus clavier reste apparent. Ces questions transforment l’exemple en changement applicatif que vous pouvez inspecter. Elles élargissent aussi la demande au-delà de la simple suppression d’une image clé, tout en conservant un périmètre assez limité pour être vérifié sur l’écran réel.
Vous pouvez choisir un modèle d’IA sans restrictions si votre point de terminaison pris en charge, compatible OpenAI ou Anthropic, en propose un. Ajoutez ses paramètres de connexion et les identifiants requis, en gardant à l’esprit que ses capacités et restrictions dépendent du modèle et du serveur. Examinez les changements CSS et de composants obtenus avant de tester l’interface avec les animations activées puis réduites. Utilisez la navigation au clavier autant que le pointeur. L’objectif est un comportement cohérent pour les deux préférences, étayé par le rendu de votre application plutôt que par la seule description de l’assistant.
Vérifier ensemble les animations et les interactions
Que doit préciser une demande de réduction des animations ?
Nommez l’élément animé, l’information qu’il communique et le comportement de remplacement attendu. Incluez le composant et la feuille de style concernés. Le changement proposé peut ainsi préserver un retour d’information utile plutôt que supprimer l’animation sans considérer ce que les utilisateurs perdent.
L’arrêt d’une animation peut-il masquer le statut actuel ?
Oui, si le mouvement était le seul indicateur. Inspectez le texte, la forme ou le marqueur d’état restant lorsque l’animation est désactivée. Demandez une solution adaptée à votre interface, puis vérifiez qu’elle reste claire pendant toute l’interaction.
Pourquoi tester le focus clavier pendant un changement d’animation ?
Les styles proches d’un contrôle animé peuvent aussi affecter son indicateur de focus. Parcourez l’écran modifié au clavier et confirmez quel élément est actif. Examiner uniquement les images clés ne suffit pas à établir que l’ensemble de l’interaction reste compréhensible.
Que peut vérifier le modèle à partir des fichiers sources ?
Il peut proposer une interprétation du code disponible dans les limites de son contexte et de ses outils. Vous devez toujours inspecter les états rendus et exécuter les vérifications du projet. Considérez les écrans, styles ou conditions d’exécution manquants comme des limites de la revue.
MotionHearth · Mis à jour 2026-10-25