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";
}
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';