Open the context
Choose the project folder and name the files or behavior involved.
Workflows
Coding workflows · Reduced-motion CSS
03
A concrete starting point
Stop a decorative CSS animation when reduced motion is requested. Check both preference states and keyboard focus, preserving the status text when movement is disabled.
Define the change
Describe the input, expected output and boundaries that must stay intact.
Inspect the work
Review the proposed edits and any commands before relying on their result.
Check the outcome
Compare actual behavior with the expected result. If a check fails, investigate it before applying more changes.
Reduced-motion CSS
A concrete starting point
@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; }
}The example is a starting point for a real project, not a claim that generated code is already tested. Adjust paths, dependencies and expected behavior to match your application.