Изменение скорости ключевого кадра с помощью ползунка ⇐ CSS

[Anonymous]

Я пытаюсь создать интерактивную черную дыру, которая вращается быстрее или медленнее в зависимости от положения ползунка. Я превратил свой GIF в анимацию @keyframe со сдвигом фона, чтобы можно было изменять скорость с помощью свойств CSS. Проблема в том, что я не могу использовать переменные для изменения скорости во время воспроизведения, и оно просто останавливается всякий раз, когда я касаюсь ползунка.
вот мой HTML-код:

Код: Выделить всё

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

CSS-код:

Код: Выделить всё

.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%;}
}

Я думаю, что анимация автоматически останавливается, как только я меняю параметры, поэтому, если бы был способ автоматически запустить анимацию снова, то, возможно, это сработало бы?
Обратите внимание, что я не использую какие-либо специальные библиотеки или что-то еще, и все это делается в коде Visual Studio.

Подробнее здесь: https://stackoverflow.com/questions/793 ... h-a-slider