我正在尝试使用jquery或javascript回调一个简单的动画

.css文件中的动画称为

@keyframes scrollTextTwo{}

。my.js文件中的代码是：

$(document).ready(function(){
  rightBox.style.animation = "scrollTextTwo 10s 1";
});

当我在浏览器中加载.html文件时，它会完美地运行一次，或者如果我将scrollTextTwo 10后面的“1”替换为infinite，它将无限运行。 我的问题是，只有在上面示例中的#rightBox完成动画后，如何从.css文件中获取第二个对象（如#leftBox）来制作动画

我用代码笔附上了所有三个文档：html/css/.js，以防有人想深入研究代码

---

您可以收听

animationend

事件。使用

.one（）

方法附加事件侦听器，使其只触发一次。当事件被触发时，这意味着动画已经结束，这意味着您可以在回调中设置另一个元素的动画

---

我犯了一个错误，下一个动画不是“leftBox”，它被设置为RightBox2，对于任何实际查看代码peni复制的$（“#rightBox”）.css（'动画'，“scrollTextTwo 5s 1”）；测试它是否会迭代一次，结果是thx，但我把$（'#rightBox'）.css（'animation'，'scrollTextTwo 5s1'）.one（'animationend'，function（）{$（'#rightBox'）.css（'animation'，'scrollTextTwo 5s1'）；）；测试它是否会迭代两次，然后在下一步测试它，它是否会迭代

$('#rightBox').css('animation', "scrollTextTwo 5s 1").one('animationend', function () {
  $('#leftBox').css('animation', "scrollTextTwo 5s 1");
});