<div class="box"></div>
:root {
  --reduce-motion-toggle: initial;
}

body {
  display: grid;
  place-content: center;
  min-height: 100vh;
  animation-name: var(--reduce-motion-toggle, rotate);
  animation-duration: 2s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(359deg);
  }
}

.box {
  width: 100px;
  height: 100px;
  background: purple;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --reduce-motion-toggle: ;
  }
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.