Javascript CSS无限滚动div

嗨，我正试图使div与一个简单的css动画滚动

问题是它循环不好，因为在重新开始滚动之前有一点闪光

代码如下：

c{ 位置：相对位置； 背景：红色； 最大高度：200px； 浮动：左； 宽度：300px； 高度：300px； 溢出：隐藏； 溢出y：自动； } .卡之家{ 位置：绝对位置； 利润率：20px； 排名：0； 动画：滚动10s线性1s无限； } 跨度{ 最小宽度：300px； 最小高度：40px； 显示：块； 颜色：白色； 保证金：5px； 背景：蓝色； } @关键帧滚动{ 100%{top:-100%；} } SSS 1. 2. 3. 4. 5. 6. 7. 8.

---

如果你想让它在动画完成后平滑地滚动到顶部，你可以做的一件事就是稍微修改一下你的动画，这样它就不会在底部结束，而是在顶部结束，这是原始状态，这样当动画重新启动时就不会有任何跳跃

您可以通过以下方式完成此操作：

使用95%的动画时间滚动到底部。 使用剩余的5%向上滚动。 代码更改非常简单，不需要任何JavaScript：

@keyframes scroll {
    95% { top: -100%; }
    100% { top:0; }
}

此演示显示了结果：

c{ 位置：相对位置； 背景：红色； 最大高度：200px； 浮动：左； 宽度：300px； 高度：300px； 溢出：隐藏； 溢出y：自动； } .卡之家{ 位置：绝对位置； 利润率：20px； 排名：0； 动画：滚动10s线性1s无限； } 跨度{ 最小宽度：300px； 最小高度：40px； 显示：块； 颜色：白色； 保证金：5px； 背景：蓝色； } @关键帧滚动{ 95%{top:-100%；} 100%{top:0；} } SSS 1. 2. 3. 4. 5. 6. 7. 8.

---

Hmmm是一个棘手的问题，如果您希望它是纯css，则需要一些硬编码值，但这里是它的要点：

c{ 位置：相对位置； 背景：红色； 最大高度：225px；/*显示精确跨距数的高度-在本例中，跨距为45px 40高度加上5个边距，边距塌陷，我们显示5个跨距开始*/ 浮动：左； 宽度：315px； 身高：225px； 溢出：隐藏； 溢出y：自动； } .卡之家{ 位置：绝对位置； 排名：0； 动画：滚动10s线性1s无限； } 跨度{ 最小宽度：290px； 最小高度：40px； 显示：块； 颜色：白色； 保证金：5px； 背景：蓝色； } @关键帧滚动{ 100%{top:-360px；}/*top是本例中的跨距数8乘以如上所述的跨距高度45px*/ } 1. 2. 3. 4. 5. 6. 7. 8. 1. 2. 3. 4. 5.

---

请把代码放在问题中，而不是试图回避它：-附加了JSFIDLE，看它似乎只是在重新启动时立即上升到顶部。如果你愿意的话，你基本上可以更快地制作反向动画，让它达到顶峰。@VictorVH我不太明白，你说的反向动画是什么意思？@blastabam我们知道代码在那里，但人们想在按下链接之前浏览一下代码，看看他们是否能提供帮助，这就是为什么规则说如果你有一个JSFIDLE链接，你需要在你的问题中加入代码。