Play or pause CSS animation using JavaScript

Question

I'm unsure if the following lines of JavaScript are correct. On the click of a button, the following JavaScript function is called. This function should pause the CSS animation when clicked once and resume the animation if clicked again:

function myFunction()
    {
        document.getElementById("sky").style.animationPlayState = "paused | running";
    }

You can pause or run animation, but your function is a bit incorrect. You can use [this article](https://css-tricks.com/how-to-play-and-pause-css-animations-with-css-custom-properties/) about manipulating animations states using JS. — koloml, Oct 20 '21 at 10:37
Of course this is not correct, because `paused | running` is not a valid value for the animationPlayState. You did not implement any check or "or" logic with that, you just assigned a string value. — CBroe, Oct 20 '21 at 10:38
Probably duplicate: https://stackoverflow.com/questions/5804444/how-to-pause-and-resume-css3-animation-using-javascript — Bálint Cséfalvay, Oct 20 '21 at 10:38

score 0 · Answer 1 · answered Nov 09 '21 at 22:24

The logic for determining what state to change it to, needs to be done outside the quotes. You are probably looking more for something like this:

function myFunction()
{
  var sky = document.getElementById("sky");
  if(sky.style.animationPlayState == "paused")
  {
    sky.style.animationPlayState = "running";
  }
  else
  {
    sky.style.animationPlayState = "running";
  }
}

Or all in one line like this:

element.style.animationPlayState = running ? 'paused' : 'running';

Play or pause CSS animation using JavaScript

1 Answers1