Javascript，无限幻灯片动画上下移动

我想制作一个无限的幻灯片动画，它可以像下图一样在JavaScript中上下移动。 不应显示该区域以外的幻灯片，但应在幻灯片3之后再次查看幻灯片1、2和3

我看到了到的链接，但我不知道该怎么办。 JQuery不可用。我应该用什么方法

幻灯片应继续在屏幕上流动

*{margin:0；padding:0；}
.家长{
位置：相对位置；
宽度：700px；
高度：500px；
背景颜色：淡紫色；
溢出：隐藏；
}
.block1、.block2{
位置：绝对位置；
显示器：flex；
柔性包装：包装；
宽度：200px；
}
.区块1{
右：220px；
}
.区块2{
右：0px；
}
.c1、.c2、.c3{
宽度：100%；
高度：220px；
}
.c1{背景色：红色；}
.c2{背景色：粉红色；}
.c3{背景色：橙色；}

---

不是平滑的，而是我的解决方案

请注意您的更改-延迟、动画时间和许多 另请查看本文以获得更简要的解释：-

*{margin:0；padding:0；}
.家长{
位置：相对位置；
宽度：700px；
高度：500px；
背景颜色：淡紫色；
溢出：隐藏；
}
.block1、.block2{
位置：绝对位置；
显示器：flex；
柔性包装：包装；
宽度：200px；
}
.区块1{
右：220px；
-webkit动画：扩展5s；
动画迭代次数：无限；
动画方向：交替；
}
.区块2{
右：0px；
-webkit动画：扩展5s；
动画迭代次数：无限；
动画延迟：2s；
动画方向：交替；
}
.c1、.c2、.c3{
宽度：100%；
高度：120px；
}
@-webkit关键帧展开{
0%{顶部：0%}
25%{排名前：100%}
50%{顶部：0%}
100%{顶部：100%；}
}
.c1{背景色：红色；}
.c2{背景色：粉红色；}
.c3{背景色：橙色；}

---

不是平滑的，而是我的解决方案

请注意您的更改-延迟、动画时间和许多 另请查看本文以获得更简要的解释：-

*{margin:0；padding:0；}
.家长{
位置：相对位置；
宽度：700px；
高度：500px；
背景颜色：淡紫色；
溢出：隐藏；
}
.block1、.block2{
位置：绝对位置；
显示器：flex；
柔性包装：包装；
宽度：200px；
}
.区块1{
右：220px；
-webkit动画：扩展5s；
动画迭代次数：无限；
动画方向：交替；
}
.区块2{
右：0px；
-webkit动画：扩展5s；
动画迭代次数：无限；
动画延迟：2s；
动画方向：交替；
}
.c1、.c2、.c3{
宽度：100%；
高度：120px；
}
@-webkit关键帧展开{
0%{顶部：0%}
25%{排名前：100%}
50%{顶部：0%}
100%{顶部：100%；}
}
.c1{背景色：红色；}
.c2{背景色：粉红色；}
.c3{背景色：橙色；}

由于要设置动画的项目的尺寸（高度）与包含元素的高度相比，所有三个项目（部分）都可以同时看到，并且同一项目的小部分在顶部和底部都可以看到

因此我们需要两份。CSS动画具有每次迭代将每个块移动50%（即3个图像）的变换，从而产生连续流

*{margin:0；padding:0；}
.家长{
位置：相对位置；
宽度：700px；
高度：500px；
背景颜色：淡紫色；
溢出：隐藏；
}
.block1、.block2{
位置：绝对位置；
显示器：flex；
柔性包装：包装；
宽度：200px；
}
.区块1{
右：220px；
}
.区块2{
右：0px；
}
.c1、.c2、.c3{
宽度：100%；
高度：220px；
}
.c1{背景色：红色；}
.c2{背景色：粉红色；}
.c3{背景色：橙色；}
.block1、.block2{
动画迭代次数：无限；
动画持续时间：5s；
动画计时功能：线性；
动画填充模式：正向；
}
.区块1{
动画名称：slidedown；
}
.区块2{
动画名称：slideup；
}
@关键帧向下滑动{
0% {
转化：translateY（-50%）；
}
100% {
变换：translateY（0）；
}
}
@关键帧滑动{
0% {
变换：translateY（0）；
}
100% {
转化：translateY（-50%）；
}
}

由于要设置动画的项目的尺寸（高度）与包含元素的高度相比，所有三个项目（部分）都可以同时看到，并且同一项目的小部分在顶部和底部都可以看到

因此我们需要两份。CSS动画具有每次迭代将每个块移动50%（即3个图像）的变换，从而产生连续流

*{margin:0；padding:0；}
.家长{
位置：相对位置；
宽度：700px；
高度：500px；
背景颜色：淡紫色；
溢出：隐藏；
}
.block1、.block2{
位置：绝对位置；
显示器：flex；
柔性包装：包装；
宽度：200px；
}
.区块1{
右：220px；
}
.区块2{
右：0px；
}
.c1、.c2、.c3{
宽度：100%；
高度：220px；
}
.c1{背景色：红色；}
.c2{背景色：粉红色；}
.c3{背景色：橙色；}
.block1、.block2{
动画迭代次数：无限；
动画持续时间：5s；
动画计时功能：线性；
动画填充模式：正向；
}
.区块1{
动画名称：slidedown；
}
.区块2{
动画名称：slideup；
}
@关键帧向下滑动{
0% {
转化：translateY（-50%）；
}
100% {
变换：translateY（0）；
}
}
@关键帧滑动{
0% {
变换：translateY（0）；
}
100% {
转化：translateY（-50%）；
}
}

您需要使用css属性“transition”。类过渡：左300ms线性；我无法使用该方法，因为该项目应作为下一个项目添加，而不是第一个项目。您是否知道，在所有情况下，3张幻灯片至少会按顺序填充容器？如果没有，你将需要不止一个副本。你需要使用css道具