Javascript 如何通过按一次按钮开始然后停止CSS动画，然后再重做？

当我通过单击按钮启动CSS动画时，结果与我预期的一样。
但是，当我再次单击它时，动画不会重新启动(

这是我的代码：

window.onload = () => {
    let button = document.getElementById('button');
    let votreRole = document.getElementById('role');
    let roles = ['TOP', 'JUNGLE', 'MID', 'ADC', 'SUPPORT'];
    let chargement = document.getElementById('chargement');

// User's clicking > animation starts in 1s > at the end, the role is outputed
    button.addEventListener('click', function(){
        chargement.style.animationPlayState = 'running';
        setTimeout(function (){
            votreRole.innerText = roles[Math.floor(roles.length * Math.random())];
            chargement.style.animationPlayState = 'paused';
        }, 1000)
    })


}

---

尝试删除启动动画的类，然后添加它 又回来了

---

由evolutionxbox回答

尝试删除启动动画的类，然后重新添加？是的，成功了！我将“style.animationPlayState”更改为“style.animation”，然后将其切换为“1s 0s”，然后切换为“none”。谢谢！我不明白为什么要“animationPlayState”不要工作BTW：/我也不确定。我很高兴找到一个解决方案。考虑写它作为答案，所以它可能有利于其他人？