Javascript 以更好的方式使用jquery重复动画代码

我正在尝试制作简单的动画 线路长度反复变化

这是我的代码

$（文档）.ready（函数（）{
变量红线=$（'.redline'）；
设置间隔（红移，100）
})
函数redmove（）{
变量红线=$（'.redline'）；
动画（{'width'：'500px'}，2000）
.animate（{'width'：'20px'}，2000）
}

.redline{
背景：红色；
高度：10px；
宽度：20px；
}

---

您可以通过CSS处理它，如下所示：

.redline{
高度：10px；
宽度：20px；
背景：红色；
-webkit动画名称：test_animation；/*Safari 4.0-8.0*/
-webkit动画持续时间：4s；/*Safari 4.0-8.0*/
-webkit动画延迟：0s；/*Safari 4.0-8.0*/
动画名称：test_动画；
动画持续时间：4s；
动画延迟：0s；
动画填充模式：正向；
动画迭代次数：无限；
}
/*Safari 4.0-8.0*/
@-webkit关键帧测试动画{
0% {
宽度：20px；
}
50% {
宽度：500px；
}
100% {
宽度：20px；
}
}
/*标准语法*/
@关键帧测试动画{
0% {
宽度：20px；
}
50% {
宽度：500px；
}
100% {
宽度：20px；
}
}

看看这个

@关键帧更改宽度{
0% {
宽度：20px；
}
50% {
宽度：500px；
}
100% {
宽度：20px；
}
}
.红线{
高度：50px；
背景色：红色；
动画：4s放松0s无限宽度；
}

---

您可以使用简单的CSS@关键帧动画，如下所示：

.redline{
背景：红色；
高度：10px；
宽度：20px；
动画名称：动画线；
动画持续时间：2秒；
动画填充模式：轻松进入；
动画填充模式：两者都有；
动画迭代次数：无限；
}
@关键帧动画线{
0% {
宽度：20px；
}
50% {
宽度：500px；
}
100% {
宽度：20px；
}
}

---

您不使用CSS动画的具体原因是什么？这更容易。@ata老实说，我不知道如何用CSS制作“自动重复”动画……你能告诉我怎么做吗？好了@Hannibal我同意@ata。另外，jqueryanimate速度非常慢，而且在性能方面非常贪婪。如果你想制作简单的动画，可以使用CSS动画。如果您想要更复杂的东西，可以使用Javascript动画库。不要忘记优化