CSS mit reduzierter Bewegung
Stoppen Sie eine dekorative CSS-Animation bei angeforderter Bewegungsreduktion.
@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
Prüfen Sie beide Einstellungen und den Tastaturfokus und behalten Sie den Statustext ohne Bewegung bei.
Vor dem Anwenden prüfen
Vergleichen Sie das tatsächliche Verhalten mit dem erwarteten Ergebnis. Klären Sie fehlgeschlagene Prüfungen vor weiteren Änderungen.
Modelle
Richten Sie einen OpenAI-kompatiblen oder Anthropic-Endpunkt mit Basis-URL und gegebenenfalls API-Schlüssel ein. Testen Sie die Verbindung. Ein lokaler Modellserver muss laufen; entfernte Werkzeuge können Daten separat übertragen.
@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; }
}Bewegungspräferenzen als Teil einer Oberflächenänderung behandeln
MotionHearth ist eine Programmierumgebung für Windows zur Entwicklung von Oberflächenänderungen mit einem verbundenen KI-Modell. Bringen Sie den Projektordner mit und beschreiben Sie, was eine Interaktion vermitteln soll. Das Gespräch kann Komponente und Stile gemeinsam verfolgen und Ihnen helfen, eine vorgeschlagene Animation im Kontext des Status, Fokus oder Feedbacks zu prüfen, den sie vermitteln soll.
Eine durch motion.css angeregte Aufgabe ist die Prüfung einer Animation bei gewünschter reduzierter Bewegung. Fragen Sie, wie die vorhandene Oberfläche dieselben Informationen vermittelt, nachdem die Bewegung endet, und ob der Tastaturfokus erkennbar bleibt. Diese Fragen machen aus dem Beispiel eine überprüfbare Anwendungsänderung. Sie halten die Anfrage auch umfassender als das bloße Löschen eines Keyframes und zugleich klein genug, um sie auf dem tatsächlichen Bildschirm zu prüfen.
Sie können ein uneingeschränktes KI-Modell wählen, wenn Ihr unterstützter OpenAI-kompatibler oder Anthropic-Endpunkt eines anbietet. Ergänzen Sie Verbindungsdetails und erforderliche Zugangsdaten und berücksichtigen Sie, dass Fähigkeiten und Beschränkungen beim Modell und Server liegen. Prüfen Sie die resultierenden CSS- und Komponentenänderungen, bevor Sie die Oberfläche mit aktivierter und reduzierter Bewegung testen. Nutzen Sie sowohl Tastaturnavigation als auch Zeigereingaben. Das Ziel ist ein stimmiges Verhalten unter beiden Präferenzen, belegt durch die Darstellung Ihrer Anwendung und nicht allein durch die Beschreibung des Assistenten.
Bewegung und Interaktion gemeinsam prüfen
Was sollte eine Anfrage zu reduzierter Bewegung angeben?
Benennen Sie das bewegte Element, die vermittelten Informationen und das erwartete Alternativverhalten. Fügen Sie die relevante Komponente und das Stylesheet hinzu. So kann die vorgeschlagene Änderung nützliches Feedback bewahren, statt Bewegung zu entfernen, ohne den Informationsverlust für Benutzer zu berücksichtigen.
Kann eine gestoppte Animation den aktuellen Status verbergen?
Ja, wenn die Bewegung der einzige Hinweis war. Prüfen Sie verbleibenden Text, Form oder Zustandsmarker bei deaktivierter Animation. Bitten Sie um eine zur Oberfläche passende Alternative und prüfen Sie dann, ob sie während der gesamten Interaktion klar bleibt.
Warum bei einer Bewegungsänderung den Tastaturfokus testen?
Stile nahe einem animierten Steuerelement können auch dessen Fokusanzeige beeinflussen. Navigieren Sie mit der Tastatur durch die geänderte Ansicht und prüfen Sie, welches Element aktiv ist. Die Prüfung von Keyframes allein zeigt nicht, ob die gesamte Interaktion verständlich bleibt.
Wie viel kann das Modell anhand von Quelldateien überprüfen?
Es kann eine Interpretation des Codes vorschlagen, der innerhalb seines Kontexts und mit seinen Werkzeugen verfügbar ist. Sie müssen weiterhin die gerenderten Zustände untersuchen und Projektprüfungen ausführen. Betrachten Sie fehlende Ansichten, Stile oder Laufzeitbedingungen als Grenzen der Prüfung.
MotionHearth · Aktualisiert 2026-10-25