如何使用HTML5 CSS3和JavaScript创建无限文本列表滚动条垂直循环

我想要一个类似于阿里巴巴主页上的动画，当你向下滚动到网站，向下到达RFQ报价请求部分右侧表单区域。为便于参考，请在网站的该部分附上一张图片

我尝试了以下代码：

.rfq滚动主
{
框大小：内容框；
颜色：#333；
字体大小：16px；
字体系列：“Roboto”，无衬线；
显示：内联块；
位置：相对位置；
}
.rfq列表滚动包装器
{
宽度：608px；
高度：30px；
利润率：25px0；
边缘顶部：25px；
右边距：0px；
边缘底部：25px；
左边距：0px；
位置：相对位置；
垂直对齐：基线；
显示：内联块；
颜色：#333；
字体系列：“Roboto”，无衬线；
背景：透明；
}
.询价单
{
高度：30px；
溢出：隐藏；
显示：内联块；
}
.rfq列表分区范围
{
填充：-4px15px 10px 15px；
高度：30px；
边缘底部：32px；
显示：内联块；
}
.rfq列表分区范围：第一个孩子
{
动画：滚动25秒无限；
}
@关键帧滚动
{
0% 
{
变换：translateY（0）；
}
6.66667%
{
变换：translateY（0）；
}
8.33333%
{
transform:translateY（-18px）；
}
15%
{
transform:translateY（-18px）；
}
16.6667%
{
转换：translateY（-36px）；
}
23.3333%
{
转换：translateY（-36px）；
}
25%
{
transform:translateY（-54px）；
}
31.6667%
{
transform:translateY（-54px）；
}
33.3333% 
{
transform:translateY（-72px）；
}
40%
{
transform:translateY（-72px）；
}
41.6667%
{
转换：translateY（-90px）；
}
48.3333%
{
转换：translateY（-90px）；
}
50%
{
transform:translateY（-108px）；
}
56.6667%
{
transform:translateY（-108px）；
}
58.3333% 
{
转换：translateY（-126px）；
}
65% 
{
转换：translateY（-126px）；
}
66.6667% 
{
转换：translateY（-144px）；
}
73.3333% 
{
转换：translateY（-144px）；
}
75% 
{
转换：translateY（-162px）；
}
81.6667% 
{
转换：translateY（-162px）；
}
83.3333% 
{
变换：translateY（-180px）；
}
90% 
{
变换：translateY（-180px）；
}
91.6667% 
{
transform:translateY（-198px）；
}
98.3333% 
{
transform:translateY（-198px）；
}
100% 
{
转换：translateY（-216px）；
}
}

Y****的“项目信息rfq”>“酒店木制衣架”收到4份报价
t****的“item-info-rfq2”>“定制t恤”收到6份报价
C****的“医疗包”收到4份报价
莫比在酒后驾车时，非turpis suscipit ultricies坐在一个非mi的座位上。
多洛·塞特·艾米特，奉献给我们的精英们。
不，不，不，不，不，不。
非维尼那提孕妇的粗节杖。
莫比在酒后驾车时，非turpis suscipit ultricies坐在一个非mi的座位上。

这是一个动画关键帧序列问题，我花了一些时间，并能够将其配置为正常工作

下面是正确的代码：

.rfq滚动主
{
框大小：内容框；
颜色：#333；
字体大小：16px；
字体系列：“Roboto”，无衬线；
显示：内联块；
位置：相对位置；
}
.rfq列表滚动包装器
{
宽度：608px；
高度：30px；
利润率：25px0；
边缘顶部：25px；
右边距：0px；
边缘底部：25px；
左边距：0px；
位置：相对位置；
垂直对齐：基线；
显示：内联块；
颜色：#333；
字体系列：“Roboto”，无衬线；
背景：透明；
}
.询价单
{
高度：30px；
溢出：隐藏；
显示：内联块；
}
.rfq列表分区范围
{
填充：5px15px 5px 15px；
高度：30px；
边缘底部：32px；
显示：内联块；
}
.rfq列表分区范围：第一个孩子
{
动画：滚动20秒无限；
}
@关键帧滚动
{
0% 
{
变换：translateY（0）；
}
6%
{
变换：translateY（0）；
}
8%
{
转换：translateY（-25px）；
}
14%
{
转换：translateY（-25px）；
}
16%
{
转换：translateY（-40px）；
}
22%
{
转换：translateY（-40px）；
}
24%
{
转换：translateY（-70px）；
}
30%
{
转换：translateY（-70px）；
}
32% 
{
转换：translateY（-100px）；
}
38%
{
转换：translateY（-100px）；
}
40%
{
转换：translateY（-115px）；
}
46%
{
转换：translateY（-115px）；
}
48%
{
转换：translateY（-145px）；
}
54%
{
转换：translateY（-145px）；
}
56% 
{
转换：translateY（-170px）；
}
62% 
{
转换：translateY（-170px）；
}
64% 
{
转换：translateY（-185px）；
}
70% 
{
转换：translateY（-185px）；
}
72% 
{
转换：translateY（-215px）；
}
78% 
{
转换：translateY（-215px）；
}
80% 
{
转换：translateY（-240px）；
}
86%