CSS：重复的动画背景

我试图创建一个重复的背景，由两部分组成。每个部分都是一个渐变，当一个向上移动时，另一个向下移动

我得到的最好结果是：

html{
背景：黑色；
颜色：#4c；
}
身体{
保证金：30vh自动；
最大宽度：80vw；
}
.挥手{
背景：无；
高度：1公厘；
宽度：50%；
位置：绝对位置；
z指数：2；
动画：移动700ms-0ms步数（2）无限二者；
}
.颜色：：之后，
.颜色：：以前{
内容：“；
位置：绝对位置；
左：0；
右：0；
身高：100%；
排名：0；
}
.颜色{
背景图像：线性梯度（#fe0000 50%，#6531ff 0 100%）；
}
.颜色：：之后{
背景：线性梯度（底部，#f4e04d，#3bceac 20%，rgba（22,22,22,0）100%），线性梯度（右侧，#042a2b 3rem，透明3rem，透明6rem）；
}
波动
.颜色：：之后，
.颜色：：以前{
背景大小：5rem1rem；
背景重复：重复-x；
}
@关键帧移动{
0% {
边缘顶部：-3rem；
}
100% {
最高保证金：-3.25雷姆；
}
}

---

更新：这是一个有趣的问题。我很惊讶地发现，我没有一个明显的或特别优雅的解决方案来让梯度垂直运行，同时用水平间隙重复

比我最初想象的要难以捉摸得多

我能想到的最好办法是在一个伪元素中加入一个渐变，然后应用一个遮罩图像。这在IE中不起作用，但在其他地方都起作用

请参阅下面更新的演示

---

如果我理解你想做什么，我想你可以通过设置背景位置的动画来完成：

.demo{
高度：200px；
背景图像：
线性梯度（#f4e04d，#3bceac 20%，rgba（22,22,22,0）100%）；
动画：移动0.7秒无限交替；
背景大小：3rem；
位置：相对位置；
}
.demo：：之前{
内容：''；
位置：绝对位置；
排名：0；
左：0；
底部：0；
右：0；
背景：线性梯度（#042a2b，透明）；
/*这是神奇的部分：使用水平重复线性渐变
遮罩“列”，允许容器的背景渐变
展示*/
-webkit遮罩图像：重复线性渐变（向右，黑色0 3rem，透明3rem 6rem）；
背景大小：3rem；
/*反向运行相同的动画以向上而不是向下设置动画*/
动画：移动0.7秒无限交替反转；
}
@关键帧移动{
从{
背景位置：0；
}
到{
背景位置：
200px；
}
}

---

很难准确推断您要做什么，但这里有另一个示例（非常类似于），它将向下移动第一个背景，而向上移动第二个背景：

.sample{
宽度：250px；
高度：50px；
位置：相对位置；
背景图像：线性渐变（至底部，#f4e04d，#3bceac 20%，rgba（22,22,22,0）100%），线性渐变（至右侧，#042a2b 3rem，透明3rem，透明6rem）；
动画：移动1s无限线性；
}
@关键帧移动{
0%, 100% {
背景位置：0-75px，0；
}
50% {
背景位置：0,0-75px；
}
}

可能如下所示：

.box{
高度：100px；
背景：线性梯度（红、蓝、黄、红）0/100%200%；
动画：y 2s线性无限；
}
.box：：之后{
内容：“；
显示：块；
身高：100%；
背景：线性梯度（绿色、浅蓝色、粉色、绿色）0/100%200%；
动画：继承；
动画方向：反向；
-webkit面罩：线性梯度（90度，#fff 50%，透明0）0 0/20%100%；
}
@关键帧y{
到{
背景位置：0-200%；
}
}

---

这非常接近我想要的，谢谢。我只是在努力让第二个梯度到第一个梯度的右边。所以我要寻找的是以下模式：AbAbAb。。。其中A向上移动，b向下移动。然后A向下移动，B向上移动。查看更新的答案和演示。看起来像我现在的答案：）是的。我注意到在我编辑之后，你做了基本相同的事情。但您的重复/调整方法更好。干杯。谢谢，我添加了一个图片来说明我在寻找什么，因为它与此有点不同。