Ändern der Geschwindigkeit eines Keyframes mit einem Schieberegler ⇐ CSS

[Guest]

Was ich versuche, ist, ein interaktives Schwarzes Loch zu schaffen, das sich je nach Position eines Schiebereglers schneller oder langsamer dreht. Ich habe mein GIF in eine @keyframe-Animation mit Hintergrundverschiebung umgewandelt, damit die Geschwindigkeit durch CSS-Eigenschaften geändert werden kann. Das Problem ist, dass ich scheinbar keine Variablen verwenden kann, um die Geschwindigkeit während der Wiedergabe zu ändern, und es stoppt einfach, wenn ich den Schieberegler berühre.
Hier ist mein HTML-Code:

Code: Select all

var slider = document.getElementById("sliderSpin");
slider.addEventListener("input", (event) => {
root.style.setProperty("--spin", event.target.value + "%");
} );

CSS-Code:

Code: Select all

.SpinChanger {
background: url(300 frame spritesheet, frames stacked horizontally) 0 0 no-repeat;
background-size: 30000%;
animation: GifAnimChanger steps(299) var(--spin) infinite;
aspect-ratio: 1 / 1;
width: 300px;
position: relative;
bottom: 300px;
left: 200px;
}
:root {
--spin: 2s;
}
/* animation that shifts the background over, causing it to resemble a gif */
@keyframes GifAnimChanger {
0% {background-position: 0%;}
100% {background-position: 100%;}
}

Ich denke, dass die Animation automatisch stoppt, sobald ich die Parameter ändere. Wenn es also eine Möglichkeit gäbe, die Animation automatisch wieder zu starten, würde es dann vielleicht funktionieren?
Beachten Sie, dass ich keine speziellen Bibliotheken oder ähnliches verwende und dass dies alles in Visual Studio Code erfolgt.