Как поставить css анимацию на паузу?

Question

[qo_0p]

Не получается поставить анимацию на паузу через webkitAnimationPlayState="paused" подскажите, что делаю не так?

<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

[Алексей Ostin]

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

Comments

[qo_0p]

Видел, но думал можно проще через .webkitAnimationPlayState="paused"