redirect javascript page after animation

Question

Good, I’m making a game in HTML5 + CSS3 + Javascript and I’m in the initial menu. I wanted the button before redirecting the page to make an animation. The animation part is working fine, but once I enter the code part to redirect the page, it stops running the animation. Anyone know how to help? Below I leave the code part in Javascript.

function ajuda(){
this.style.backgroundPosition = "right";
var sombotao = document.getElementById("sombotao");
sombotao.play();            
window.location.href="ajuda.html";                
}

Answer 1

You can use the event ended HTML5, the description is:

The event is triggered when the reproduction has finally come to an end

The ended Event is Fired when playback has stopped because the end of the media was reached.

In that case it could be so:

function ajuda() {
    this.style.backgroundPosition = "right";
    var sombotao = document.getElementById("sombotao");
    audio.addEventListener('ended', function(){
         window.location.href = "ajuda.html";
    });
    sombotao.play();
}