javascript - 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 animation keep reverting to original state

他们中的大多数人建议添加 -webkit-animation-fill-mode: forwards; 我有，但它不能解决问题，因为我试图在 IE 11 中执行此操作。

每次我的动画运行时，它都会恢复到原始状态。

它在 Chrome 中运行良好，但我需要在 IE 10+ 中使用它。

Answer 1

只需添加

animation-fill-mode: forwards;

这是您正在使用的 webkit 前缀版本的标准语法。

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