Estoy haciendo una animación básica en Js en la que el sol pasa por el cielo, y debo poder pararlo, darle al play y cambiarle la velocidad.
Funciona el play y que se pare, pero no me funciona el cambio de velocidad.
var cuadro = undefined;
window.onload = function () {
cuadro = document.getElementById("sol");}
function parar() {
cuadro.style.animationPlayState = "paused";
cuadro.style.MozAnimationPlayState = "paused";
cuadro.style.WebkitAnimationPlayState = "paused";
}
function seguir() {
cuadro.style.animationPlayState = "running";
cuadro.style.MozAnimationPlayState = "running";
cuadro.style.WebkitAnimationPlayState = "running";}
function velocidad(num) {
valor = num + "s";
cuadro.style.animationDuration = valor;
cuadro.style.MozAnimationDuration = valor;
cuadro.style.WebkitAnimationDuration = valor;
}
Cambio la velocidad con este select:
<select name="vel">
<option selected="selected" onclick="velocidad(4)">Normal</option>
<option onclick="velocidad(10)">Muy lento</option>
<option onclick="velocidad(8)">Lento</option>
<option onclick="velocidad(2)">Rápido</option>
<option onclick="velocidad(1)">Muy Rápido</option>
</select>
Y el start y stop:
<input type="button" name="stop" value="stop" onclick="parar()"/>
<input type="button" name=”play” value="play" onclick="seguir()"/>
El problema es que cuando selecciono alguna de las velocidades, el valor no cambia.