title: Pure CSS Continuous Horizontal Text Scroll Without Break
body: <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 class="lang-css prettyprint-override"><code>&lt;p class=&quot;marquee&quot;&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>