如何让 Javascript CSS 动画运行多次？答案

【问题标题】：How can I get a Javascript CSS animation to run more than one time?如何让 Javascript CSS 动画运行多次？
【发布时间】：2023-01-22 00:51:19
【问题描述】：

我有一些运行 CSS 动画的 Javascript 代码。它工作正常，但我需要刷新浏览器才能让它再次运行。如何修改我的代码以使其在每次单击按钮时运行？

下面是我使用的代码。

/*Javascript*/
document.getElementById('LogoContainer').addEventListener('click',function() {
var c = document.getElementsByClassName('logo-rec');
for (var i = 0; i < c.length; i++) {
c[i].classList.add('logo-animate');
}
})

/*HTML*/    
<button id="LogoContainer">
<div class="logo-rec"></div>
</button>

/*CSS*/    
.logo-animate {
animation-name: MoveLeft;
animation-duration: 3s;  
}
    
@keyframes MoveLeft {
0% { transform : translatex(0px) }
50%  { transform : translatex(-15px) }
100%  { transform : translatex(35px) }
}

【问题讨论】：

标签： javascript css

【解决方案1】：

您可以利用 CSS 中的“animation-iteration-count”属性来指定动画应执行的次数。例如，要使动画无限运行，您可以将 animation-iteration-count 设置为“infinite”，如下所示：

.logo-animate {
animation-name: MoveLeft;
animation-duration: 3s;  
animation-iteration-count: infinite;
}

或者，您可以指定一个数值来表示所需的重复次数。如：

.logo-animate {
animation-name: MoveLeft;
animation-duration: 3s;  
animation-iteration-count: 5;
}

这将运行动画 5 次。

【讨论】：