JS AnimationEnd Loop，想连续循环不使用；设置间隔/设置超时答案

【问题标题】：JS AnimationEnd Loop, would like to loop continually WITHOUT using; setInterval/setTimoutJS AnimationEnd Loop，想连续循环不使用；设置间隔/设置超时
【发布时间】：2016-08-05 11:18:41
【问题描述】：

在下面的代码中，我尝试循环三个函数，这些函数仅在前一个函数完成后才触发，最后一个函数调用第一个函数以重新开始该过程。使用 setInterval/setTimout 不会是很好的答案，因为 RequestAnimationFrame 取代了它们作为一种更清洁的做事方式，但我不知道如何将 RequestAnimationFrame 应用于此代码。同样使用这两种方法也无法回答为什么第三个函数不调用第一个函数的问题。

<body onload="runOne()">

function runOne(){
 var x = document.getElementById("rightBox");
 document.getElementById("rightBox").style.animation = "scrollTextTwo 10s";
 x.addEventListener("animationend",runTwo);
};


function runTwo(){
 var x = document.getElementById("rightBoxTwo");
 document.getElementById("rightBoxTwo").style.animation = "scrollTextTwo 10s";
 x.addEventListener("animationend",runThree);
};


function runThree(){
 var x = document.getElementById("rightBoxThree");
 document.getElementById("rightBoxThree").style.animation = 
 "scrollTextTwo 10s";
 x.addEventListener("animationend",runOne);
};

上面的代码只运行一次，它将播放/动画所有三个函数，但在“runThree()”完成后停止。我想知道“runThree()”如何在运行第三个动画完成后调用“runOne()”？

【问题讨论】：

标签： javascript html css

【解决方案1】：

所以，我认为您有几个选择：可以使用animation: none 在函数runTwo 中重置rightBox 的动画。如果您将scrollTextTwo 10s 分配回rightBox，它应该重新开始。其他的等价。

请参阅下面的 Codepen，我在其中使用 JavaScript 实现了无尽的 CSS 动画。

或者，也可以不使用 JavaScript：您可以使用 animation-delay、infinite 重复和其他一些技巧来创建非常复杂的动画时间线，也许还可以看看下面的 question。

【讨论】：

“动画：无”在代码中的外观如何？我不熟悉重置动画。
就像这样：document.getElementById("rightBox").style.animation = "none"; 我还在我的帖子中添加了 Codepen 中的工作示例。看看这个看看它是如何工作的:)
非常感谢您！现在要潜入你的代码笔！