CSS動畫恢復為原始狀態

Question

  document.getElementById("clicky").addEventListener("click", changeMe); function changeMe() { var ele = document.getElementById("item"); ele.className= "hide"; } 

 #clicky{cursor:pointer;} .hide { animation: fadeout 1s ; -webkit-animation: fadeout 1s ; /* Chrome, Safari, Opera */ -webkit-animation-fill-mode: forwards; } /* Chrome, Safari, Opera */ @-webkit-keyframes fadeout { from { display:block; visibility:visible; opacity: 1;} to { display:none; visibility:hidden; opacity:0;} } /* Standard syntax */ @keyframes fadeout { from { display:block; visibility:visible; opacity: 1;} to { display:none; visibility:hidden; opacity:0;} } 

 <a id="clicky">Click me</a> <br /><br /> <div id="item">I should go bye byes!<br />But instead, I return!!!</div> 

我看到過類似的問題，例如css3動畫不斷恢復為原始狀態

他們中的大多數建議添加-webkit-animation-fill-mode: forwards; 我有，但不能解決問題，因為我正在嘗試在IE 11中執行此操作。

每次我的動畫運行時，它都會恢復為原始狀態。

它在Chrome中運行良好，但在IE 10以上版本中需要。

Answer 1

只需添加

animation-fill-mode: forwards;

這是您使用的Webkit前綴版本的標准語法。

http://jsfiddle.net/d2d46zf8/7/