Javascript 这个CSS动画链应该无限运行，但它不'；T

我有一套简单的CSS动画，我想无限期地运行。但由于某些原因，它只运行两次并停止

这里有一个

下面是我如何使用Jquery实现它（代码中也可以看到这一点）

---

请参见动画的

#slide3

应还原为

#slide1

。确实如此，但它在2个周期后停止。

您已将

计数器
变量定义为
常量
，但需要将其设置为
let
，以允许以后重新分配

let counter = 0;

在绑定到动画结尾时，您还需要在
上使用
$.on，而不是使用
$.one
$。on
用于将处理程序绑定到某个事件（每次事件发生时），而
$。一个
仅用于一次绑定（第一次事件发生时运行处理程序，但仅此而已）

以下是您的更新示例：

答案已经给出并被接受，这仅适用于infos，因为javaScript只考虑了三个框

动画延迟
可用于保持动画无限循环：


正文{
颜色：#FFFFFF；
背景色：#27292d；
溢出：隐藏；
背景：#27292d url（'bg.jpg'）无重复固定中心；
字体系列：“Roboto”，无衬线；
}
.滑块容器{
位置：绝对位置；
右：0；
最高：40%；
}
.滑块内容{
位置：相对位置；
字体大小：32px；
文本转换：大写；
}
.盒子{
浮动：左；
填充：10px 20px；
保证金：5px；
位置：相对位置；
}
.分电箱{
明确：两者皆有；
左边距：60像素；
}
.接线盒跨度{
颜色：#000000；
填充：10px 20px；
背景色：#FFFFFF；
}
.box1{
背景色：#FF4F80；
}
.box2{
背景色：#4CA2F0；
}
.box3{
背景色：#53CEC8；
}
@关键帧心跳{
0% {
变换：平移（100px，200px）比例（0）
}
50% {
变换：平移（100px，200px）比例（0）
}
60% {
变换：平移（-100px）比例（1.5）
}
70% {
变换：平移（-100px）比例（1.5）
}
80% {
变换：平移（-100px）比例（1.5）
}
100% {
变换：平移（100px，-200px）比例（0）
}
}
.单滑块{
位置：绝对位置；
右：0；
宽度：400px；
高度：50px；
利润率：20px；
变换：比例（0）；
}
.动画-1{
过渡：300毫秒立方贝塞尔（.17、.67、.55、1.43）；
动画：放松心跳6s-3s无限；
}
.动画-2{
过渡：300毫秒立方贝塞尔（.17、.67、.55、1.43）；
动画：放松心跳6s-1s无限；
}
.动画-3{
过渡：300毫秒立方贝塞尔（.17、.67、.55、1.43）；
动画：放松心跳6s1s无限；
}

粉色标题
白头
另一个标题
副标题
还有10个

粉色标题
白头
另一个标题
副标题
还有10个

您已将计数器变量定义为常量，但需要让它允许以后重新分配。抱歉，已更正此错误。但这不是问题所在@MartinAdámekI认为jQuery
.one
应该只执行一次
除了给定元素和事件类型的处理程序在第一次调用后解除绑定外，.one（）方法与.on（）相同
。查看更多信息：@Nouphal.M
。在
上完成了。谢谢循环对我来说是无限的（在codepen）。
let counter = 0;