我正在调用这样的动画:
document.getElementById('banner').className = "changeColorToIndigo";
然后我得到了 CSS 属性:
div.changeColorToIndigo {
animation-duration: 1s;
animation-name: changeColorToIndigo;
animation-fill-mode: forwards;
}
关键帧动画:
@keyframes changeColorToIndigo {
from {background-color: #00BBD2;}
to {background-color: #3F51B5;}
}
但是动画完成后又回到初始状态,这是为什么呢?我已将填充模式设置为转发并指定了 to
(100%) 属性。
最佳答案
我已将您的代码放入 Fiddle 中, 对我来说效果很好
HTML
<div id="banner"></div>
CSS
div{
height: 40px;
width: 40px;
background-color: #00BBD2;
}
div.changeColorToIndigo {
animation-name: changeColorToIndigo;
animation-duration: 1s;
animation-fill-mode: forwards;
}
@keyframes changeColorToIndigo {
from {background-color: #00BBD2;}
to {background-color: #3F51B5;}
}
jQuery
$(document).ready(function(){
$('#banner').addClass('changeColorToIndigo');
})
关于CSS 关键帧动画回到初始状态,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33564218/