Hago una corrección en mi código pero sigue sin funcionar.
<!DOCTYPE html />
<html lang="es">
<head>
<title>Ejercicio</title>
<meta charset="utf-8" />
<link href="Styles/Estilos.css" rel="stylesheet" />
<script type="text/javascript">
//parar la animación: propiedad animation-play-state: paused;
function parar()
{
avioneta.style.animationplaystate = "paused";
avioneta.style.mozanimationplaystate = "paused";
avioneta.style.webkitanimationplaystate = "paused";
}
//reiniciar la animación: propiedad animation-play-state: running;
function seguir()
{
avioneta.style.animationplaystate = "running";
avioneta.style.mozanimationplaystate = "running";
avioneta.style.webkitanimationplaystate = "running";
}
//Cambiar la velocidad: propiedad animation-duration: "num"
function velocidad(num)
{
valor = num + "s";
avioneta.style.animationduration = valor;
avioneta.style.mozanimationduration = valor;
avioneta.style.webkitanimationduration = valor;
}
//Buscamos el elemento animado en el DOM.
window.onload = function ()
{
avioneta = document.getElementById("avion");
}
</script>
</head>
<body>
<section>
<article>
<h2>Avión volando:</h2>
<p>
<input type="button" id="stop" value="stop" onclick="parar()" />
<input type="button" id="play" value="play" onclick="seguir()" />
<b>Elige la velocidad:</b>
<select id="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>
</p>
<div id="visor">
<img id="playa" src="Imagenes/Playa.jpg" alt="playa">
<img id="avion" src="Imagenes/Avion.png" alt="avion">
</div>
</article>
</section>
</body>
</html>