CSS动画恢复到原始状态答案

【问题标题】：CSS animation reverts to original stateCSS动画恢复到原始状态
【发布时间】：2015-03-12 22:25:03
【问题描述】：

 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+ 中需要它。

【问题讨论】：

标签： javascript html css internet-explorer

【解决方案1】：

只需添加

animation-fill-mode: forwards;

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

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

【讨论】：

完美...我不相信我错过了它！ :(