Javascript 循环中的运动元素

我正在尝试将这些长方体的父对象从右向左移动，并已将动画设置为循环

@关键帧移动{
到{
左：-200px；
}
}
#容器{
位置：绝对位置；
左：0px；
顶部：0px；
宽度：100%；
身高：100%；
动画名称：移动；
动画持续时间：5s；
动画迭代次数：无限；
}
.盒子{
显示：内联块；
宽度：200px；
高度：100px；
背景：红色；
利润率：10px；
}

---

如果我正确理解了您的问题，您正在寻找类似下面代码片段的内容。如果你不需要javascript，css就足够了

如果希望它相对于窗口宽度隐藏，则框需要是流体（百分比而不是固定像素）。你可以利用这些价值观

如果需要固定宽度，可以创建固定宽度包装，并将其设置为溢出隐藏

/*流体*/
@关键帧移动-1{
到{
左-50%；
}
}
@关键帧移动-2{
到{
左-20%；
}
}
#容器{
宽度：100%；
高度：100px；
溢出：隐藏；
位置：相对位置；
}
.盒子{
位置：绝对位置；
显示：内联块；
宽度：20%；
高度：100px；
背景：红色；
动画持续时间：5s；
动画迭代次数：无限；
}
.box:第n个孩子（1）{
动画名称：move-1；
左：100%；
}
.box:第n个孩子（2）{
动画名称：move-2；
左：130%；
}
/*固定的*/
@关键帧移动-3{
到{
左：-440px；
}
}
@关键帧移动-4{
到{
左：-220px；
}
}
#集装箱2{
宽度：200px；
高度：100px；
边框：1px纯色浅灰色；
溢出：隐藏；
位置：相对位置；
}
.box2{
位置：绝对位置；
显示：内联块；
宽度：200px；
高度：100px；
背景：红色；
动画持续时间：5s；
动画迭代次数：无限；
}
.box2:n个孩子（1）{
动画名称：move-3；
左：220px；
}
.box2:n个孩子（2）{
动画名称：move-4；
左：440px；
}

流体容器
固定容器

如果我正确理解了您的问题，您正在寻找类似下面代码片段的内容。如果你不需要javascript，css就足够了

如果希望它相对于窗口宽度隐藏，则框需要是流体（百分比而不是固定像素）。你可以利用这些价值观

如果需要固定宽度，可以创建固定宽度包装，并将其设置为溢出隐藏

/*流体*/
@关键帧移动-1{
到{
左-50%；
}
}
@关键帧移动-2{
到{
左-20%；
}
}
#容器{
宽度：100%；
高度：100px；
溢出：隐藏；
位置：相对位置；
}
.盒子{
位置：绝对位置；
显示：内联块；
宽度：20%；
高度：100px；
背景：红色；
动画持续时间：5s；
动画迭代次数：无限；
}
.box:第n个孩子（1）{
动画名称：move-1；
左：100%；
}
.box:第n个孩子（2）{
动画名称：move-2；
左：130%；
}
/*固定的*/
@关键帧移动-3{
到{
左：-440px；
}
}
@关键帧移动-4{
到{
左：-220px；
}
}
#集装箱2{
宽度：200px；
高度：100px；
边框：1px纯色浅灰色；
溢出：隐藏；
位置：相对位置；
}
.box2{
位置：绝对位置；
显示：内联块；
宽度：200px；
高度：100px；
背景：红色；
动画持续时间：5s；
动画迭代次数：无限；
}
.box2:n个孩子（1）{
动画名称：move-3；
左：220px；
}
.box2:n个孩子（2）{
动画名称：move-4；
左：440px；
}

流体容器
固定容器

你的意思是制造“乒乓球”效果还是“包裹”效果？不太清楚是什么。。我需要的是，如果一个div移出屏幕，那么我希望它来自屏幕的另一侧，并以循环的方式重复这个过程。我需要更清楚地了解你真正想要的是什么，乒乓球用于播放动画，直到完成，然后向后移动，更像正弦动画。如果该对象离开该区域，包装只是将其重新定位到窗口的另一侧。我认为即使使用JS也无法实现此效果（除非克隆元素）。我之所以这样说，是因为当

div

s靠近图像中的边缘时，它们不能被分成两部分。所以，不克隆它们的唯一方法是让它们完全离开页面，然后重新定位。你的意思是要产生“乒乓”效果还是“包裹”效果？不太清楚这些是什么。。我需要的是，如果一个div移出屏幕，那么我希望它来自屏幕的另一侧，并以循环的方式重复这个过程。我需要更清楚地了解你真正想要的是什么，乒乓球用于播放动画，直到完成，然后向后移动，更像正弦动画。如果该对象离开该区域，包装只是将其重新定位到窗口的另一侧。我认为即使使用JS也无法实现此效果（除非克隆元素）。我之所以这样说，是因为当

div

s靠近图像中的边缘时，它们不能被分成两部分。所以，不克隆它们的唯一方法是让它们完全离开页面，然后重新定位。这是一个不错的解决方案，但对我来说不起作用。因为我有两个以上的div，而且都是动态的。第二，我想要的是，div不断从右向左移动，当第一个div离开屏幕时，它就开始从屏幕的另一侧返回，那么div的数量未知吗？如果是这样，您必须为.box使用一个固定的宽度，然后必须使用js乘以元素（包括间距）来设置容器的宽度。然后使用该宽度作为基础来定位对象并设置其动画。我想我需要更多的信息来更好地解释。希望能有点帮助。我用一个图解更新了这个问题，我会帮助你们理解我想要达到的目标。我创造了一把小提琴，你们的意思是这样的吗？你总是可以玩数字游戏来实现你所需要的，一旦它出现在另一边