Reduced Motion Pulse

A recording dot can pulse by default, then become steady when the user asks for reduced motion.

Program

Motion can draw attention, but it should not be required. A reduced-motion media query keeps the status visible while removing the loop.

reduced_motion_pulse.html

<style>
  @keyframes pulse {
    50% { opacity: 1; transform: scale(1.2); }
  }
  .status { display: inline-block; width: 1rem; height: 1rem; border-radius: 999px; background: #dc2626; opacity: 0.55; animation: pulse 1.2s infinite; }
  @media (prefers-reduced-motion: reduce) {
    .status { animation: none; opacity: 1; }
  }
</style>
<span class="status" aria-label="Recording"></span>

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

animation animation applies keyframes over time; setting it to none removes the motion.