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

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

@property --spin-progress {
  syntax: "<number>";
  initial-value: 0;
  inherits: false;
}

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

@keyframes spin {
  from {
    --spin-progress: 0;
  }
  to {
    transform: rotate(360deg);
    --spin-progress: 1;
  }
}

const div = document.querySelector('div');
const slowmo = document.querySelector('input');
const fastSpinDurationSecond = 2;
const slowSpinDurationSecond = 5;
const spinAnimationName = 'spin';

slowmo.addEventListener('change', (e) => {
  const progress = window.getComputedStyle(div).getPropertyValue('--spin-progress');
  let duration = 0;
  if (slowmo.checked) {
    duration = slowSpinDurationSecond;
  } else {
    duration = fastSpinDurationSecond;
  }
  div.style.setProperty('animation-duration', duration.toString() + 's');
  div.style.setProperty('animation-delay', (-1 * duration * progress).toString() + 's');
  
  // resetting playback time, by removing the animation and adding it back.
  div.style.setProperty('animation-name', 'none');
  setTimeout(()=> {
     div.style.setProperty('animation-name', spinAnimationName);
  }, 0);
})