<input type="checkbox" id="slowmo" />
<label for="slowmo">Slowmo!</label>
<div><div>🐶</div></div>

body { font-size: 32px; }
input { height: 32px; width: 32px; }
div { font-size: 64px; width: fit-content; }

div {
  position: absolute;
  animation-name: spin;
  animation-delay: 0s;
  animation-duration: 2s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  transform-origin: 100% 100%;
}

div div {
  position: relative;
  animation-duration: 5s;
  animation-play-state: paused;
}

#slowmo:checked ~ div {
  animation-play-state: paused;
}

#slowmo:checked ~ div div {
  animation-play-state: running;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}