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的一些問題/解答，但沒有遇到與我有關的問題。 我讀到的一件事是動畫結束時會恢復其默認值。 但是我的默認值表示動畫是“隱藏的”嗎？ 來源： 如何停止我的Webkit框架動畫？

如果有人能指出正確的方向，我將不勝感激。 如果我不夠清楚，請詢問更多信息。

謝謝

Answer 1

對於您要嘗試執行的操作，您無需使用-webkit-animation-play-state。

而是嘗試通過應用設置了動畫屬性的類來啟動動畫。 動畫結束后，請使用JavaScript事件監聽器刪除該類。

您還應該使用opacity而不是visibility:hidden 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