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

Question

我正在开发一款游戏，刚刚发现了 -webkit-animation-play-state CSS 属性。我希望某些文本显示为短动画，然后在再次调用时隐藏并显示（在 javascript 中）。

当我想在 javascript 中启动动画时，我想出了如何启动动画，但完成后，文本会停留在屏幕上，这是我不想要的。

HTML：

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

CSS：

@-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;
}

JS：

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

我在这个网站上阅读了一些关于 -webkit-animation-play-state 的问题/答案，但没有关于我遇到的问题。 我读到的一件事是动画在结束时会返回其默认值。但是我的默认值说动画是“隐藏的”？来源：how to stop my webkit frame animation?

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

谢谢

Answer 1

对于你想要做的事情，你不需要使用 -webkit-animation-play-state。

相反，尝试通过应用一个设置了动画属性的类来启动动画。然后在动画结束后使用 JavaScript 事件侦听器移除该类。

您还应该使用 opacity 而不是 visibility:hidden 隐藏元素，因为您在动画中操作 opacity。

CSS：

@-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;
}

JS：

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

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

演示>>CodePen