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> 

I have seen the similar questions aready, such as css3 animation keep reverting to original state

Most of them suggest adding -webkit-animation-fill-mode: forwards; which I have but it doesn't fix the issue because I'm trying to do this in IE 11.

Every time my animation runs, it reverts back to the original state.

It works fine in Chrome, but I need this in IE 10+.

Answer 1

Just add

animation-fill-mode: forwards;

which is the standard syntax for the webkit prefixed version you are using.

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