CSS关键帧动画回到初始状态

Posted 2023-03-06

【中文标题】CSS关键帧动画回到初始状态

【英文标题】：CSS Keyframes animation go back to initial state

【发布时间】：2016-02-07 10:45:20

【问题描述】：

我正在调用这样的动画：

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%) 属性。

【问题讨论】：

寻求代码帮助的问题必须在问题本身中包含重现它所需的最短代码。见How to create a Minimal, Complete, and Verifiable example

【参考方案1】：

我已将您的代码放在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');
)

【讨论】：

我找到了罪魁祸首。我有一个事件监听器，一旦完成就删除了类，因为我想让它“干净”。那么，如果我删除该类，它会恢复到初始状态吗？