<h2>Prefers reduced motion</h2>
<div class="container">
  <div class="ball"></div>
</div>
<p>The Prefers reduced motion @media rule lets us tap into the users OS setting for users who prefer an motionless experience.</p>
<p>On Mac go to Preferences > Accessibility > Display > Reduce motion to make the ball stop moving.</p>
<p>In Windows 10 go to Settings > Ease of Access > Display > Show animations in Windows</p>
<p>In Windows 7: Control Panel > Ease of Access > Make the computer easier to see > Turn off all unnecessary animations (when possible).</p>
body {
  display: grid;
  place-content: center;
  margin: 0;
  min-height: 100vh;
  background-color: hsl(222, 99%, 90%);
  font-family: sans-serif;
  line-height: 1.5rem;
  color: hsl(222, 99%, 18%);
}

h2, p {
  margin: 0 0 1rem 0;
  max-width: 50ch;
}

.container {
  margin-bottom: 1rem;
  height: 50px;
  background-color: hsl(222, 99%, 18%);
  position: relative;
  border-radius: 1000px;
}

.ball {
  width: 40px;
  height: 40px;
  position: absolute;
  left: 4%;
  top: 5px;
  background-color: hsl(222, 99%, 60%);
  border-radius: 50%;
  animation: moveball 1s ease-out alternate infinite;
}

@keyframes moveball {
  to {
      left: 88%;
  }
}

/* Remove animations if the user prefers reduced motion */
@media (prefers-reduced-motion) {
  .ball {
    animation: none;
  }
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.