prefers-reduced-motion

Simple example using the "prefers-reduced-motion" media query in both CSS and JS.

HTML

<div>
  <h2>Default</h2>
  <button>
    Start
  </button>
</div>

<div>
  <h2>Prefered: <span class="mode"></span></h2>
  <button class="prefered">
    Start
  </button>
</div>

CSS

div {
  border: solid 1px #000000;
  padding: 1rem;
  margin-bottom: 1rem;
}

button {
  font-size: 2rem;
  border: none;
  border-radius: 0.5rem;
  padding: 0.5rem 1rem;
  color: #FFFFFF;
  background-color: #970955;
  animation-duration: 3s;
  animation-iteration-count: infinite;
  animation-name: pulse;
}

@keyframes pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(149, 17, 85, 1);
  }
  100% {
    box-shadow: 0 0 20px 10px rgba(149, 17, 85, 0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .prefered {
    animation: none;
  }
}

JavaScript

var mode = $(".mode");

var handler = function (mql) {
  if (mql.matches) {
    mode.text("reduced");
  } else {
  	mode.text("no-preference");
  }
};

var mql = window.matchMedia("(prefers-reduced-motion: reduce)");
mql.addListener(handler);
handler(mql);