CSS met minder beweging
Stop een decoratieve CSS-animatie wanneer minder beweging wordt gevraagd.
@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; }
}Project
Controleer beide voorkeuren en toetsenbordfocus en behoud de statustekst wanneer beweging is uitgeschakeld.
Controleer vóór het toepassen
Vergelijk het werkelijke gedrag met het verwachte resultaat. Onderzoek een mislukte controle voordat je verdergaat met wijzigingen.
Modellen
Stel een OpenAI-compatibel of Anthropic-endpoint in met de basis-URL en zo nodig een API-sleutel. Test de verbinding. Een lokale modelserver moet actief zijn; externe hulpmiddelen kunnen apart gegevens versturen.
@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; }
}Behandel bewegingsvoorkeuren als onderdeel van een interfacewijziging
MotionHearth is een Windows-codeomgeving om interfacewijzigingen te ontwikkelen met een verbonden AI-model. Breng de projectmap mee en beschrijf wat een interactie moet communiceren. Het gesprek kan component en stijlen samen volgen, zodat je een voorgestelde animatie beoordeelt in de context van de status, focus of terugkoppeling die zij moet overbrengen.
Een taak op basis van motion.css is een animatie beoordelen wanneer verminderde beweging wordt gevraagd. Vraag hoe de bestaande interface dezelfde informatie communiceert nadat de beweging stopt en of toetsenbordfocus zichtbaar blijft. Die vragen maken het voorbeeld tot een controleerbare applicatiewijziging. Ze houden het verzoek ook breder dan alleen een keyframe verwijderen, maar klein genoeg om op het echte scherm te controleren.
Je kunt een AI-model zonder beperkingen kiezen als je ondersteunde OpenAI-compatibele of Anthropic-endpoint dat aanbiedt. Voeg verbindingsgegevens en vereiste inloggegevens toe en besef dat mogelijkheden en beperkingen bij model en server horen. Beoordeel de resulterende CSS- en componentwijzigingen voordat je de interface test met ingeschakelde en verminderde beweging. Gebruik zowel toetsenbordnavigatie als aanwijzerinvoer. Het doel is samenhangend gedrag bij beide voorkeuren, onderbouwd door wat je applicatie weergeeft en niet alleen door de beschrijving van de assistent.
Beweging en interactie samen controleren
Wat moet een verzoek om verminderde beweging aangeven?
Benoem het bewegende element, de informatie die het overbrengt en het verwachte alternatieve gedrag. Voeg de relevante component en stylesheet toe. Zo kan de wijziging nuttige terugkoppeling behouden in plaats van beweging te verwijderen zonder te kijken wat gebruikers verliezen.
Kan een gestopte animatie de huidige status verbergen?
Dat kan als beweging de enige aanwijzing was. Bekijk de resterende tekst, vorm of statusmarkering als animatie is uitgeschakeld. Vraag om een alternatief dat bij je interface past en controleer daarna of het gedurende de hele interactie duidelijk blijft.
Waarom toetsenbordfocus testen bij een bewegingswijziging?
Stijlen rond een geanimeerd bedieningselement kunnen ook de focusindicator beïnvloeden. Navigeer met het toetsenbord door het gewijzigde scherm en controleer welk element actief is. Alleen keyframes beoordelen stelt niet vast of de hele interactie begrijpelijk blijft.
Hoeveel kan het model uit bronbestanden verifiëren?
Het kan een interpretatie voorstellen van de code die binnen zijn context en hulpmiddelen beschikbaar is. Jij moet nog steeds de weergegeven toestanden bekijken en projectcontroles uitvoeren. Beschouw ontbrekende schermen, stijlen of runtimeomstandigheden als grenzen aan de beoordeling.
MotionHearth · Bijgewerkt 2026-10-25