在下面的代码中，我尝试循环三个函数，这些函数仅在前一个函数完成后才触发，最后一个函数然后调用第一个函数重新开始整个过程。使用 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()”？
最佳答案
所以，我认为您有几种选择: 可行的方法是重置 rightBox 的动画。在函数中 runTwo与 animation: none .如果您分配 scrollTextTwo 10s回到rightBox它应该重新开始。等同于其他的。
见下文 Codepen ，我在其中使用 JavaScript 实现了无穷无尽的 CSS 动画。
或者，也可以不使用 JavaScript:您可以使用 animation-delay , infinite重复和其他一些技巧来创建非常复杂的动画时间轴，也许还可以看看以下 question .
关于javascript - JS AnimationEnd Loop，想在不使用的情况下不断循环；设置间隔/设置超时，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38780392/