title: Continuous Pure CSS Ticker
body: <p>I've achieved a ticker with pure css, there is a small issue which i'm not able to rectify.</p>
  
  <p>I want the ticker to be continuous without any gaps. i.e after "item 2" scroll ends "item 1" should appear immediately. </p>
  
  <p>Currently if you notice in the fiddle, after the last item in scroll there is a lot of empty space. I need the first item to appear immediately after the last item in the marquee.</p>
  
  <pre><code>    &lt;style&gt;
  
      .nochng {color:#333}
      .upchng {color:#00b300}
      .dwnchng{color:#cc0000}
  
      @-webkit-keyframes ticker {
      0% {
      -webkit-transform: translate3d(0, 0, 0);
      transform: translate3d(0, 0, 0);
      visibility: visible;
      }
      100% {
      -webkit-transform: translate3d(-100%, 0, 0);
      transform: translate3d(-100%, 0, 0);
      }
      }
      @keyframes ticker {
      0% {
      -webkit-transform: translate3d(0, 0, 0);
      transform: translate3d(0, 0, 0);
      visibility: visible;
      }
      100% {
      -webkit-transform: translate3d(-100%, 0, 0);
      transform: translate3d(-100%, 0, 0);
      }
      }
      .ticker-wrap {
      width: 100%;
      overflow: hidden;
      padding-left: 100%;
      }
  
      .ticker {
      display: inline-block;
      white-space: nowrap;
      padding-right: 100%;
      -webkit-animation-iteration-count: infinite;
      animation-iteration-count: infinite;
      -webkit-animation-timing-function: linear;
      animation-timing-function: linear;
      -webkit-animation-name: ticker;
      animation-name: ticker;
      -webkit-animation-duration: 20s;
      animation-duration: 20s;
      }
  
      .ticker-wrap:hover .ticker {
      -webkit-animation-play-state: paused;
      -moz-animation-play-state: paused;
      -o-animation-play-state: paused;
      animation-play-state: paused;
      }
  
      .ticker__item {
      display: inline-block;padding: 0 0.5rem;text-transform: uppercase;}
      .italic {font-style:italic;}
      &lt;/style&gt;
      &lt;div class="ticker-wrap"&gt;
      &lt;div class="ticker"&gt;
      &lt;div class="ticker__item"&gt;&lt;span&gt;Item1&lt;/span&gt;&lt;span class="dwnchng"&gt; Red &lt;span class="italic"&gt;Color &lt;/span&gt;&amp;nbsp;&lt;small&gt;(inserted)&lt;/small&gt;  &lt;/span&gt;&lt;/div&gt;
      &lt;div class="ticker__item"&gt;&lt;span&gt;Item2&lt;/span&gt;&lt;span class="upchng"&gt; Green &lt;span class="italic"&gt;Color &lt;/span&gt;&amp;nbsp;&lt;small&gt;(inserted)&lt;/small&gt;  &lt;/span&gt;&lt;/div&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p><a href="https://jsfiddle.net/1vzz662a/" rel="nofollow noreferrer">FIDDLE</a></p>