title: CSS Scrolling Text Loop
body: <p>I am trying to do continuous scrolling text using pure CSS.</p>
  
  <p>Here is my HTML I am trying to scroll:</p>
  
  <pre><code>&lt;div class="marquee"&gt;
  &lt;div class="text"&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas placerat maximus massa ut dictum. Sed eu est justo. Quisque pharetra vel tellus ac porttitor. Nunc luctus sollicitudin diam non dignissim. Phasellus mollis semper libero, nec rhoncus est tristique quis. Nulla eget pharetra nunc, sed faucibus felis. Curabitur nec posuere nisl. Quisque at vestibulum velit. Pellentesque sagittis lacus ut aliquet faucibus. Ut porta purus id mi tincidunt mollis. Integer vulputate, eros malesuada viverra rutrum, magna nisl vehicula nisi, nec pellentesque augue nunc vel felis. Sed consectetur lacinia quam et auctor. Cras nec ullamcorper orci. Vivamus id felis eu mauris tempor viverra eget in mi. Nam nibh risus, tincidunt in hendrerit quis, eleifend at dui. Aenean odio odio, eleifend vel malesuada porta, dapibus nec risus.&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>and this my CSS I got, it works, but my problem is when the text is done, its takes away to for it to start up again....is there anyway when its done it starts from the beginning so when its at the end it looks like this:</p>
  
  <blockquote>
    <p>eleifend vel malesuada porta, dapibus nec risus.   &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;   Lorem ipsum
    dolor sit amet, consectetur adipiscing</p>
  </blockquote>
  
  <pre><code>* {
    margin:0;
    padding:0;
    border:0;
  }
  
  @keyframes slide {
    from { left: 100%;}
    to { left: -100%;}
  }
  @-webkit-keyframes slide {
    from { left: 100%;}
    to { left: -100%;}
  }
  
  #marquee { 
    color:red; 
    background:#f0f0f0;
    width:100%;
    height:120px;
    line-height:120px;
    overflow:hidden;
    position:relative;
  }
  
  #text {
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:120px;
    font-size:30px;
    animation-name: slide;
    animation-duration: 10s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    -webkit-animation-name: slide;
    -webkit-animation-duration: 10s;
    -webkit-animation-timing-function:linear;
    -webkit-animation-iteration-count: infinite;
  }
  </code></pre>