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-动画播放状态的一些问题/答案，但没有关于我遇到的问题。 我读到的一件事就是当动画结束时动画会转到其默认值。但我的默认值说动画是“隐藏”的？来源：how to stop my webkit frame animation?

如果任何人都可以指出我在正确的方向，我将不胜感激。 如果我不够清楚，请索取更多信息。

谢谢

Answer 1

对于你正在尝试做的，你不需要使用-webkit-动画播放状态。

而是尝试通过应用具有动画属性集的类来启动动画。然后使用JavaScript事件侦听器在动画完成后删除该类。

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

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 >>CodePen