CSS s omezeným pohybem
Zastavte dekorativní animaci CSS při požadavku na omezení pohybu.
@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
Ověřte obě předvolby a fokus klávesnice a zachovejte stavový text po vypnutí pohybu.
Před použitím zkontrolujte
Porovnejte skutečné chování s očekávaným výsledkem. Pokud kontrola selže, před dalšími změnami zjistěte příčinu.
Modely
Nastavte endpoint kompatibilní s OpenAI nebo Anthropic pomocí základní URL a případného API klíče. Otestujte připojení. Lokální server modelu musí běžet; vzdálené nástroje mohou data odesílat samostatně.
@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; }
}Považujte preference pohybu za součást změny rozhraní
MotionHearth je programovací prostředí Windows pro vývoj změn rozhraní s připojeným AI modelem. Přineste složku projektu a popište, co má interakce sdělovat. Rozhovor může sledovat komponentu i její styly společně a pomoci posoudit navrženou animaci v kontextu stavu, zaměření či odezvy, které má zprostředkovat.
Jedním úkolem naznačeným v motion.css je kontrola animace při požadavku na omezený pohyb. Ptejte se, jak stávající rozhraní sděluje stejné informace po zastavení pohybu a zda zůstává zřejmé zaměření klávesnicí. Tyto otázky proměňují ukázku v kontrolovatelnou změnu aplikace. Zachovávají také požadavek širší než pouhé smazání klíčového snímku a přitom dostatečně malý pro ověření na skutečné obrazovce.
AI model bez omezení můžete zvolit, pokud jej nabízí podporovaný koncový bod kompatibilní s OpenAI nebo Anthropic. Přidejte údaje připojení a požadované přihlašovací údaje s vědomím, že schopnosti a omezení náleží modelu a serveru. Před testováním rozhraní se zapnutým i omezeným pohybem posuďte výsledné úpravy CSS a komponent. Použijte navigaci klávesnicí i ukazatel. Cílem je soudržné chování při obou preferencích, podložené vykreslením aplikace místo samotného popisu asistenta.
Společná kontrola pohybu a interakce
Co má specifikovat požadavek na omezený pohyb?
Pojmenujte pohybující se prvek, sdělovanou informaci a očekávané alternativní chování. Zahrňte příslušnou komponentu a styly. Návrh tak může zachovat užitečnou odezvu místo odstranění pohybu bez uvážení ztráty pro uživatele.
Může zastavená animace skrýt aktuální stav?
Ano, pokud pohyb představoval jediný indikátor. Při vypnuté animaci prověřte zbývající text, tvar či značku stavu. Žádejte alternativu odpovídající rozhraní a ověřte její srozumitelnost během celé interakce.
Proč při změně pohybu testovat zaměření klávesnicí?
Styly poblíž animovaného prvku mohou ovlivnit i indikátor zaměření. Projděte změněnou obrazovku klávesnicí a ověřte aktivní prvek. Samotná kontrola klíčových snímků nedokládá srozumitelnost celé interakce.
Kolik toho může model ověřit ze zdrojových souborů?
Může navrhnout výklad kódu dostupného v rámci svého kontextu a nástrojů. Stále musíte prohlédnout vykreslené stavy a spustit kontroly projektu. Chybějící obrazovky, styly či běhové podmínky považujte za omezení kontroly.
MotionHearth · Aktualizováno 2026-10-25