<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 --progress {
  syntax: "<number>";
  initial-value: 0;
  inherits: false;
}

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

#slowmo:checked ~ div {
  animation-name: spin1, spin2;
/* 
This does not work. `animation-delay` is not updated when `--spin1-progress` is changed (animated).
  
  animation-delay: 0s, calc(var(--progress) * -5s);

*/
  animation-delay: 0s, calc(var(--progress-copy) * -5s);
  animation-duration: 2s, 5s;
  animation-play-state: paused, running;
}

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

@keyframes spin2 {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
const div = document.querySelector('div');

document.querySelector('input').addEventListener('change', () => {
  const progress = window.getComputedStyle(div).getPropertyValue('--progress');
  div.style.setProperty('--progress-copy', progress);
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.