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/

CSS 动画恢复到原始状态

CSS animation reverts to original state

html

javascript

css

internet-explorer