Is there a way to pause an animation at the 50% mark for 2 seconds and then resume?
P.S. The setInterval method is not recommended!
function pauseAnimation() {
document.getElementById("0").style.animationPlayState = "paused";
};
var pauseInterval = setInterval(pauseAnimation, 2200);
function resumeAnimation() {
document.getElementById("0").style.animationPlayState = "running";
};
var resumeInterval = setInterval(resumeAnimation, 2600);
<div id="SpinningImages" class="SpinningImages">
</div>
<div id="BigCircle" >
</div>
</div>
`
var image = document.createElement("IMG");
image.setAttribute("src", imgArray[0].src);
image.classList.add("ball");
image.setAttribute("id", "0");
image.setAttribute("style", "animation: FourthBallStarting 2s linear normal infinite;");
image.setAttribute("alt", "Image");
image.style.animationFillMode = "forwards";
document.getElementById("SpinningImages").appendChild(image);
`