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/

CSS动画恢复到原始状态

1 个答案: