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的一些问题/答案，但没有关于我所遇到的问题。我读到的一件事是当动画结束时动画会变为默认值。但我的默认值表示动画是＆＃34;隐藏＆＃34; ？来源：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');
});

DEMO＆gt;＆gt; CodePen

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

1 个答案: