重复无尽的文本字幕

Question

我正在寻找一种巧妙，高效的字幕效果解决方案（可能确实使用了字幕标签）以使容器中的某些文本不断地重复。

例如，我要参考的是这个。

HTML

<div class="m-el">
    <marquee width="100%" direction="right">
    This text should endlessly be concatenated onto each other.
    </marquee>
</div>

CSS

.m-el { width: 1400px; }

[我知道那里有很多用于jquery的库，它们基本上也可以模拟字幕效果，但是我想知道如何使用真正的字幕标记或CSS转换方法来完成此工作。

现在效果将产生这一行文本，该文本在父div容器中滚动：https://jsfiddle.net/8shjzdut/

我实际上是想使文本基本上像这样无休止的循环而被“重复”，但是只定义了一次句子（没有重复粘贴同一文本100次………https://jsfiddle.net/8shjzdut/1/

关于如何做到这一点的任何聪明的主意？ （如果也需要js，也可以，我只是希望它表现得尽可能好并且层次较低）

Answer 1

我认为没有库就无法做到这一点，我已经尝试过使用css @keyframes，但是不可能，您只能选择重复文本

Answer 2

看起来我已经找到一种方法，但是它重复了两次文本

    $('#maindiv').width($('#div1').width());

 #maindiv{
      border: 2px solid black;
      overflow: hidden;
      white-space: nowrap;
    }
    
    #div1 {
      display: inline-block;
      animation: marquee 10s linear infinite;
    }
    
    #div2 {
      display: inline-block;
      animation: marquee2 10s linear infinite;
      animation-delay: 5s;
    }
    
    @keyframes marquee {
      from {
        transform: translateX(100%);
      }
      to {
        transform: translateX(-100%);
      }
    }
    
    @keyframes marquee2 {
      from {
        transform: translateX(0%);
      }
      to {
        transform: translateX(-200%);
      }
    }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="maindiv">
      <div id="div1">
        &nbsp;Test-1 Test-2 Test-3 Test-4 Test-5 Test-6 Test-7 Test-8 Test-9 Test-10 Test-11
      </div>
      <div id="div2">
        &nbsp;Test-1 Test-2 Test-3 Test-4 Test-5 Test-6 Test-7 Test-8 Test-9 Test-10 Test-11
      </div>
    </div>