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