Javascript CSS3最后没有空格的字幕/滴答动画

我正在用2组物品构建一个字幕/旋转木马效果。循环

项目集合

与

translateX

的跨度并不困难（），但我不喜欢每个循环末尾的空白

知道两个集合的宽度可能不同，我如何实现“连续性”的效果，因此在第一个循环之后，第一个集合（青色）出现在第二个集合（洋红）之后

---

非常感谢任何指向CSS或JS解决方案的指针…=）

如果字幕足够大，可以在动画中期交换其中一个集合

我认为，这是你仅凭CSS所能做到的

.marquee{
宽度：100%；
高度：80px；
保证金：0自动；
溢出：隐藏；
空白：nowrap；
边框：1px纯蓝色；
}
.字幕内容{
显示：内联块；
边缘顶部：5px；
动画：字幕5s线性无限；
}
.项目-收集-1{
位置：相对位置；
左：0%；
动画：交换5s线性无限；
}
@关键帧交换{
0%, 50% {
左：0%；
}
50.01%,
100% {
左：100%；
}
}
.字幕内容：悬停{
动画播放状态：已暂停
}
.项目1{
显示：内联块；
高度：70像素；
宽度：140px；
背景：青色；
垂直对齐：顶部；
左边距：15px；
}
.项目2{
显示：内联块；
高度：70像素；
宽度：100px；
背景：洋红；
垂直对齐：顶部；
左边距：15px；
线高：14px；
}
/*过渡*/
@关键帧选框{
0% {
转换：translateX（0）
}
100% {
转换：translateX（-100%）
}
}

单独使用CSS是不可能的。这是一个原因，大多数这样的滑块脚本克隆一些元素…这真的很有趣！如果我们决定制作一个固定宽度的大帐篷，它可能就足够了。如果您有两个以上的系列，它也可以足够了