Javascript 获得一个字幕，以便在空间可用时立即开始重复

这是一支我到目前为止所拥有的钢笔。我一直在使用CSS3，但如果效果更好，我愿意使用其他方法：

.userAttributes > .attributeGroup > .favoriteArtistsAttr {
  max-width: 74%;
  animation: marquee 10s linear infinite;
}

@keyframes marquee {
  0%   { text-indent: 0; }
  100% { text-indent: -100%; }
}

我希望字幕在p的结尾滑入画面的那一刻开始重复自己。我还需要品牌停止与鼠标和滚动（这部分工作已经）

---

我找到了能实现我想要的目标的例子。我注意到他们是通过复制内容来实现的，但是我一直无法让它正常工作。我还想知道这是否是实现我的目标的最佳方式，也许使用javascript或一些jquery插件会更好？我想确保它在所有浏览器上都能正常工作并且外观相同（在合理范围内）

我已经用“流派”标题更新了您最初链接的示例：

我注意到，您提供的标记有点错误，因此请继续使用原始标记：

标题栏应该在它自己的单独分区中。我已将我的标题版本设置为浮动到字幕分区的左侧

然后，marquee div需要足够宽以包含所有文本-我将其设置为500px，这样当项目达到容器的最大宽度时就不会开始堆叠

之后，您需要确保您的内容有两个跨度。在您正在处理的链接中，每个项目列表只有一个段落标记这是它没有重复的主要原因

现在，我们对流派部分的标记如下所示：

<div class="title">
    Genres:
</div>

<div class="marquee">
  <div>
    <span><a>Electronic</a>, <a>Bluegrass</a>, Classic Rock, Funk, Jam Band, Jazz, Classical</span>
    <span><a>Electronic</a>, <a>Bluegrass</a>, Classic Rock, Funk, Jam Band, Jazz, Classical</span>
  </div>
</div>

体裁：
电子、蓝草、古典摇滚、芬克、果酱乐队、爵士、古典音乐
电子、蓝草、古典摇滚、芬克、果酱乐队、爵士、古典音乐

我把字幕和标题放在一个容器div中，并为最喜爱的艺术家复制了它。。。。（这可以被命名为任何名称，但我在这里所做的是使用边距底部来创建每个项目下方的空间，而不是

标记）。 因为我们的第二个ticker有更多的内容，所以我添加了另一个名为“拉伸”的类来增加字幕的宽度

---

我知道我没有直接编辑你的小提琴对不起，不过希望这能帮你摆脱困境。

太棒了，谢谢！现在唯一的问题是我很难将内容放入容器中，似乎有一堆额外的空间（来自内联块？）。我也做了一些改变，让字幕停止在鼠标上方，并允许自定义滚动，但我注意到，这有时会导致问题的字幕再次启动。如果您对如何解决这两个问题有任何想法，请告诉我。再次感谢，如果你想看看我的目标，这里有一个实际的原型：foundationtester1.herokuapp.com