tengo una tarea sencilla, tengo esta animacion
https://codepen.io/xrtcs/pen/porRwQQ
y quiero que cuando haga clic en los botones "más rápido" y "más lento" la imagen NO restablezca su posición, para mantener la animación, solo reduzca y aumente la velocidad de la imagen.
Como puede ver ahora, cuando hace clic en los botones, la imagen restablece su posición, quiero que siga funcionando sin problemas.
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>