I have a simple task, I have this animation
https://codepen.io/xrtcs/pen/porRwQQ
and I want when I click the buttons "faster" and "slower" the image NOT to reset its position, to keep the animation going, just reduce and increase the speed of the image.
As you see now, when you click the buttons, the image resets its position, I want to keep it going smoothly.
document.getElementById("fast").addEventListener("click", gofaster);
function gofaster() {
var element = document.getElementById("animation");
element.classList.remove("slower");
element.classList.add("faster");
}
document.getElementById("slow").addEventListener("click", goslower);
function goslower() {
var element2 = document.getElementById("animation");
element2.classList.remove("faster");
element2.classList.add("slower");
}.slow{
width: 3500px;
height: 195px;
background-image: url(https://layerslider.com/wp-content/uploads/layerslider/Back-To-The-80s/hills-far-2500x2-1-2048x164.png
);
background-size: 3500px 195px;
background-position: -3500px 0;
animation: run linear infinite;
animation-duration: 100s;
}
@keyframes run {
from {background-position: -3500px 0;}
to {background-position: 0 0;}
}
.faster{
animation-duration: 10s;
}
.slower{
animation-duration: 100s;
}<div id="animation" class="slow"></div>
<button id="fast">faster</button>
<button id="slow">slower</button>