How to pause css animation?

Question

css

I can't pause the animation using webkitAnimationPlayState="paused" tell me what I'm doing wrong?

<div id = "parent" class = "parent">
    <h1 id = "word" class = "word"></h1>
</div>

.parent {

    position: absolute;

    h1 {
        
        position: absolute;
        text-align: center;
        vertical-align: middle;

    }
}


.word {
    text-align: center;
    vertical-align: middle;
    transition: 3s, linear;
}

.animation {
    font-size: 200px;
}

.invisible {
    opacity: 0;
}

var height = window.innerHeight;
var width = window.innerWidth;

var arr = ["hello", "privet", "nihao"];
var i = 0;
var elem = document.querySelector("#word")

document.getElementById('parent').style.height = height + "px";
document.getElementById('parent').style.width = width + "px";

function clearStyle() {
    document.getElementById('word').innerHTML = "";
    elem.classList.remove("animation", "invisible"); 
    setTimeout(changeWord, 1000);
}

function changeWord() {
    document.getElementById('word').innerHTML = arr[i];
    elem.classList.add("animation", "invisible");

    if (i>1) i = 0; else ++i;
}

function animationEnd() {
  word.addEventListener("transitionend", clearStyle(), false);
}
word.addEventListener("click", function () {elem.style.webkitAnimationPlayState="paused"; console.log(1);});

setInterval(animationEnd, 3000);

https://jsfiddle.net/bofckzfq/3/

Answer 1

stackoverflow.com/questions/5804444/how-to-pause-a...