title: Infinitely Scrolling Div With Wraparound Using CSS3 Animations
body: <p>I have created an animated scrolling <code>&lt;div&gt;</code> that is semi-working. The animation works except for the fact that I would like it to "wrap around." By that I mean that as the first element leaves the bottom of the screen it comes down from the top, or stacks on top of a "queue" at the top.</p>
  
  <p>How can I accomplish this? Would using 2 identical divs be the only way?</p>
  
  <p>My CSS code is as follows:</p>
  
  <pre><code>.posts 
  {
  -webkit-animation: movetweets 10s linear infinite;
  -moz-animation: movetweets 10s linear infinite;
  -o-animation: movetweets 10s linear infinite;
  }   
  
  @-webkit-keyframes movetweets {
      from {margin-top: -100%;}
      to {margin-top: 100%;}
  }
  @-moz-keyframes movetweets {
      from {margin-top: -100%;}
      to {margin-top: 100%;}
  }
  @-o-keyframes movetweets {
      from {margin-top: -100%;}
      to {margin-top: 100%;}
  }
  </code></pre>
  
  <p>Here's a <a href="http://jsfiddle.net/jtholla2/q14ff1wx/7/" rel="nofollow">JSFiddle</a> with some generic html that is the same format of my HTML.</p>