CODEWITHSUNDEEP
javascriptcssanimation
TheBestMagician
TheBestMagician

Reputation: 185

Mixing Animation With Javascript and CSS

I have been working on a project where I have to make a mixing animation. However, when I run the animation, it gets cut short. I have tried elongating the time of the animation, but it doesn't complete its full cycle.

Here is my CSS:

@keyframes nudge {  
  0%{
   transform: translate(50px, 50px);
  }
  10%{
   transform: translate(-50px, -50px);
  }
  20%{
   transform: translate(50px, 50px);
  }
  30%{
  transform: translate(-50px, -50px);
  }
  40%{
  transform: translate(50px, 50px); 
  }
  50%{
   transform: translate(-50px, -50px);
  }
  60%{
   transform: translate(50px, 50px);
  }
  70%{
   transform: translate(-50px, -50px);
  }
  80%{
  transform: translate(50px, 50px);  
  }
  90%{
  transform: translate(-50px, -50px); 
  }
  100% {
  transform: translate(50px, 50px);
  } 
  }

Here is my Javascript:

document.getElementById("mixer").style.animation="nudge 15s linear";
location="result.html"

Upvotes: 1

Views: 129

Answers (1)

imvain2
imvain2

Reputation: 15847

What you need to do is wait for the animation to complete before redirecting and you can do this with animationend.

  function onEnd(){
    window.location.href = "results.html";
  }

  var mixer = document.getElementById("mixer");
  mixer.style.animation="nudge 15s linear";

  mixer.addEventListener("webkitAnimationEnd", onEnd);
  mixer.addEventListener("animationend", onEnd);

Upvotes: 4

Related Questions