为什么在JavaScript中多次运行动画时需要清除动画？

昨天我问了一个问题（），得到了及时的回答，但即使找到了解决方案，我也不明白为什么会这样。我可以为我需要做的其他事情复制此解决方案，但在继续之前，我想了解为什么它会这样工作

所以基本上我做了三个相互调用的函数。第一个函数调用第二个函数调用“animationend”，第二个函数调用第三个函数调用“animationend”，最后第三个函数调用第一个函数重新开始循环——但我的原始代码仍然缺乏

document.getElementById（“rightBoxTwo”）.style.animation=“无”；

这是第三个函数调用第一个函数所需要的，这样循环就会重新开始。如果每个函数中没有上述代码，这三个函数将只工作一次，然后停止。StackOverFlow用户的答案；给我包括一个有我需要的工作示例和一个简短的解释

所以，我认为你有几个选择：你能做的是 使用重置函数

runTwo

中的

rightBox

动画

动画：无

。如果指定

滚动文本两个10秒

返回到

rightBox

它应该重新启动。其他的也一样

最后，我的问题是为什么需要清除动画，为什么

.style.animation=“none”完成这个

下面是解决方案提出后的工作代码



函数runOne（）{
var x=document.getElementById（“rightBox”）；
x、 addEventListener（“animationend”，runTwo）；
document.getElementById（“rightBox”）.style.animation=“scrollTextTwo 10s”；
document.getElementById（“rightBoxTwo”）.style.animation=“无”；
}
函数runTwo（）{
var x=document.getElementById（“rightBoxTwo”）；
x、 addEventListener（“动画结束”，运行三次）；
document.getElementById（“rightBoxTwo”）.style.animation=
“滚动文本两个10秒”；
document.getElementById（“rightBoxThree”）.style.animation=“无”；
}
函数runThree（）{
var x=document.getElementById（“rightBoxThree”）；
x、 addEventListener（“动画结束”，runOne）；
document.getElementById（“rightBoxThree”）.style.animation=
“滚动文本两个10秒”；
document.getElementById（“rightBox”）.style.animation=“无”；
}
最简单的原因是，以类似于
for
循环的同步方式将动画设置为同一事物两次（或多次）与执行一次相同：


let-box=document.getElementById（'box'）；
//动画只发生一次
for（设i=0；i<5；i++）{
box.style.animation='fade.5s'；
}
@关键帧淡入淡出{
从{
不透明度：1
}
到{
不透明度：0
}
}
#盒子{
高度：200px；
宽度：200px；
利润率：50像素；
背景：#018bbc；
}
最简单的原因是，以类似于
for
循环的同步方式将动画设置为同一事物两次（或多次）与执行一次相同：


let-box=document.getElementById（'box'）；
//动画只发生一次
for（设i=0；i<5；i++）{
box.style.animation='fade.5s'；
}
@关键帧淡入淡出{
从{
不透明度：1
}
到{
不透明度：0
}
}
#盒子{
高度：200px；
宽度：200px；
利润率：50像素；
背景：#018bbc；
}
对于这样的东西，您并不真正需要javascript。通过关键帧，可以按完成百分比定义样式。使用该选项，可以对2个动画计时，以获得类似的结果：


@关键帧进度{
0%{宽度：0px；}
50%{宽度：600px；}
100%{宽度：600px；}
}
@关键帧进度2{
0%{宽度：600px；}
49%{宽度：600px；}
50%{宽度：0px；}
100%{宽度：600px；}
}
div{
宽度：600px；
高度：50px；
背景色：黑色；
}
#右盒{
动画：进步无限；
}
#右框二{
动画：progress2 4s无限；
}
对于这样的东西，您并不真正需要javascript。通过关键帧，可以按完成百分比定义样式。使用该选项，可以对2个动画计时，以获得类似的结果：


@关键帧进度{
0%{宽度：0px；}
50%{宽度：600px；}
100%{宽度：600px；}
}
@关键帧进度2{
0%{宽度：600px；}
49%{宽度：600px；}
50%{宽度：0px；}
100%{宽度：600px；}
}
div{
宽度：600px；
高度：50px；
背景色：黑色；
}
#右盒{
动画：进步无限；
}
#右框二{
动画：progress2 4s无限；
}

这就像打开一盏灯。如果开关已处于接通位置；你需要先把它关掉，然后才能再打开。这就像灌满一杯水一样。如果杯子已经满了，你需要先把它倒空，然后才能再装满。这就像打开灯一样。如果开关已处于接通位置；你需要先把它关掉，然后才能再打开。这就像灌满一杯水一样。如果杯子已经满了，你需要清空它，然后才能再次装满。哦，那么你说的是功能是“安装”页面上的动画。但是，它的动画次数取决于我基于css或其他代码？因此，我这样做不是正确的方法来运行它多次？是的，你可以控制多少次的东西是动画与JS，也只有与CSS，如。就正确的方式而言，使用CSS很可能是一个更好的选择，因为浏览器可以在没有bug的情况下（或者至少少很多）制作动画，并且比您自己编写代码的速度更快。谢谢您，先生，是的，malk的回答非常有趣。这需要我做很多实验，但你给出了最连贯的答案，我为此感谢你！在你和malk所说的之间，我觉得我现在更有力量了，我想制作一些复杂的动画，让这个基本的