webkit动画播放状态：如何使用javascript按需启动/停止动画

我正在做一个游戏，刚刚发现了关于-webkit动画播放状态CSS属性。我希望某些文本显示为一个简短的动画，然后在再次调用时隐藏和显示（在javascript中）

当我想在javascript中启动动画时，我知道了如何启动动画，但在动画完成后，文本会留在屏幕上，我不想这样做

HTML:

JS:

我在这个网站上读到了一些关于webkit动画播放状态的问题/答案，但没有一个是关于我遇到的问题。 我读到的一件事是，动画在结束时会变为默认值。但是我的默认值说动画是“隐藏的”？资料来源：

如果有人能给我指出正确的方向，我将不胜感激。 如果我不够清楚，请询问更多信息

---

感谢您所做的一切，您不需要使用-webkit动画播放状态

相反，请尝试通过应用设置了动画属性的类来启动动画。然后使用JavaScript事件侦听器在动画完成后删除该类

您还应该使用

不透明度

而不是

可见性：隐藏

来隐藏元素，因为您正在动画中操纵

不透明度

CSS:

JS:

---

演示>>

此演示对我没有任何帮助不幸的是，会出什么问题？这在我的环境中对我很有效，谢谢：）但在演示示例中不起作用：）

<p id="INFO">
    TEST
</p>

@-webkit-keyframes pulse {
   from {
     opacity: 0.0;
     font-size: 100%;
   }
   to {
     opacity: 1.0;
     font-size: 400%;
   }
}

#INFO {
  position: absolute;
  left: 400px;
  top: 200px;
 -webkit-animation-name: pulse;
 -webkit-animation-duration: 1s;
 -webkit-animation-iteration-count: 1;
 -webkit-animation-timing-function: ease-in-out;
 -webkit-animation-play-state:paused;
  visibility: hidden;
}

var INFO = document.getElementById("INFO");
INFO.innerHTML = "WRONG";
INFO.style.color = "RED";
INFO.style.webkitAnimationPlayState = "running";
INFO.style.visibility = "visible";

@-webkit-keyframes pulse {
   from {
     opacity: 0.0;
     font-size: 100%;
   }
   to {
     opacity: 1.0;
     font-size: 400%;
   }
}

#INFO {
  opacity:0;
  position: absolute;
  left: 400px;
  top: 200px;
}

.pulse {
  -webkit-animation-name: pulse;
  -webkit-animation-duration: 1s;
  -webkit-animation-iteration-count: 1;
  -webkit-animation-timing-function: ease-in-out;
}

var INFO = document.getElementById("INFO");
INFO.innerHTML = "WRONG";
INFO.style.color = "RED";

INFO.addEventListener('webkitAnimationEnd', function (e) {
  this.classList.remove('pulse');
});