Pure CSS Continuous Horizontal Text Scroll Without Break : <p>I'm trying to create a news ticker with horizontal text that scrolls continuously without a break between loops. Ideally, the solution would be pure css/html, but I don't know if that's possible. Here's my rudimentary attempt so far: <a href="http://jsfiddle.net/lgants/ncgsrnza/" rel="noreferrer">http://jsfiddle.net/lgants/ncgsrnza/</a>. Note that the fiddle contains an unwanted break between each loop. </p>

<pre><code>&lt;p class="marquee"&gt;&lt;span&gt;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&lt;/span&gt;&lt;/p&gt;


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

.marquee span {
    display: inline-block;
    padding-left: 100%;
    animation: marquee 5s linear infinite;
}
</code></pre>
