Reduced Motion State

A saved-message toast keeps its layout but removes sliding motion when the user asks for reduced motion.

Program

Motion can help show change, but some users need less movement. A reduced-motion media query keeps the same content visible without the slide.

reduced_motion_state.html

<style>
.toast { padding: 12px 16px; border-radius: 8px; background: #0f766e; color: white; }
.toast { transform: translateX(0); transition: transform 300ms ease; }
.toast.entering { transform: translateX(18px); }
@media (prefers-reduced-motion: reduce) {
  .toast { transition: none; transform: translateX(0); }
}
</style>

<aside class="toast entering">Saved</aside>

prefers-reduced-motion prefers-reduced-motion lets CSS respond to a user's motion preference.

transition A transition animates a change between two CSS values.