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 - CSS 动画恢复到原始状态,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29012236/