CSS关键帧动画回到初始状态 [英] CSS Keyframes animation go back to initial state

问题描述

我正在调用这样的动画：

I'm calling an animation like this:

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;}
}

但是动画完成后动画又回到了初始状态，为什么呢？我已将填充模式设置为转发，并指定了至（100％）属性。

But the animation goes back to it's initial state after the animation has completed, why is that? I've set the fill mode to forwards and specified the to (100%) property.

推荐答案

我已将您的代码放在小提琴中，对我来说效果很好

I've put your code in a Fiddle, and it works fine for me

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关键帧动画回到初始状态的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！