No estoy seguro si las siguientes líneas de JavaScript son correctas. Al hacer clic en un botón, se llama a la siguiente función de JavaScript. Esta función debe pausar la animación CSS cuando se hace clic una vez y reanudar la animación si se vuelve a hacer clic:
function myFunction() { document.getElementById("sky").style.animationPlayState = "paused | running"; }La lógica para determinar a qué estado cambiarlo debe hacerse fuera de las comillas. Probablemente estés buscando algo como esto:
function myFunction() { var sky = document.getElementById("sky"); if(sky.style.animationPlayState == "paused") { sky.style.animationPlayState = "running"; } else { sky.style.animationPlayState = "running"; } }O todo en una línea como esta:
element.style.animationPlayState = running ? 'paused' : 'running';