Pur CSS Horizontal Continu de Défilement de Texte Sans Pause

Je suis en train de créer un ticker de nouvelles, avec une position horizontale du texte qui défile en continu, sans pause entre les boucles. Idéalement, la solution serait de la pure css/html, mais je ne sais pas si c'est possible. Voici mon rudimentaire tentative à ce jour: http://jsfiddle.net/lgants/ncgsrnza/. Notez que le violon contient un indésirable pause entre chaque boucle.

<p class="marquee"><span>This is text - This is text - This is text - This is text - This is text - This is text - This is text - This is text - This is text - This is text - This is text - This is text</span></p>


.marquee {
    margin: 0 auto;
    white-space: nowrap;
    overflow: hidden;
}

.marquee span {
    display: inline-block;
    padding-left: 100%;
    animation: marquee 5s linear infinite;
}
Hm... est-il possible de reproduire le texte? Sinon, je pense qu'il y a un peu de JS juste nécessaire de dupliquer le calque de texte à quelques reprises
qu'entendez-vous par copier du texte? Je vais utiliser Réagir, de sorte qu'il serait très facile de réutiliser un composant.
Laissez-moi vous expliquer... 🙂 donnez-moi quelques minutes
Il suffit de lire la réponse à faire à côté le problème à court texte, il devrait fonctionner parfaitement

OriginalL'auteur lgants | 2017-08-23