Baseframe field notes
A better reduced-motion fallback
Reduced motion is an alternative presentation of the same interface. It should preserve the information, controls, and final state that the animated version provides.
Start with visible, usable content
Place the final state in your normal CSS. Use keyframes to describe the temporary starting state. This keeps content visible when animations are disabled, fail to load, or are removed by a user preference.
.notice { opacity: 1; transform: none; }
@media (prefers-reduced-motion: no-preference) {
.notice { animation: arrive 280ms ease-out; }
}
@keyframes arrive {
from { opacity: 0; transform: translateY(12px); }
to { opacity: 1; transform: none; }
}A common failure is setting opacity to zero in the base style and only restoring it with an animation. Turning that animation off can then hide the content permanently.
Replace movement with meaning
If a confirmation slides into view, show the confirmation immediately in the reduced-motion version. If a shape spins during loading, keep a text label such as “Loading results.” For updates that happen without moving focus, a carefully scoped live region can announce the result to assistive technology.
Do not make essential application behavior depend on an animationend event. In the reduced-motion version, that event may never occur. Application state should determine whether an action completed; animation should present that state.
Give continuous motion a pause control
A looping decorative animation deserves particular care. Make it possible to pause, and stop it by default when the user requests reduced motion. The hero on our homepage includes a pause control; the playground only animates when you interact with it.
Test the preference, not just the CSS
Enable reduced motion in your operating system or browser developer tools. Reload the page, open its panels, submit forms, and navigate with the keyboard. Confirm that nothing disappears, no button stays blocked, and status messages remain understandable.
Read the MDN prefers-reduced-motion reference and W3C guidance on animation from interactions. Our snippets are a starting point; the full interface still needs accessibility testing.