title: CSS infinite scrolling div
body: <p>Hi i am trying to make the div to scroll with a simple css animation.</p>
  
  <p>The problem is that it doesn't loop good, because there is a little flash before to restart scrolling.</p>
  
  <p><strong>HERE IS THE CODE:</strong> <a href="https://jsfiddle.net/by6tx4o0/2/" rel="noreferrer">https://jsfiddle.net/by6tx4o0/2/</a></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.c{
    position:relative;
    background:red;
    max-height:200px;
    float:left;
    width:300px;
    height:300px;
    overflow:hidden;
    overflow-y:auto;
  }
  .card-home{
    position:absolute;
    margin:20px;
   top:0;
     animation: scroll 10s linear 1s infinite;
  }
  span {
    min-width:300px;
    min-height:40px;
    display:block;
    color:white;
    margin:5px;
    background:blue;
  }
  @keyframes scroll {
   100% { top: -100%; }
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="c"&gt;sssss
  &lt;div class="card-home"&gt;
    &lt;span&gt;1&lt;/span&gt;
    &lt;span&gt;2&lt;/span&gt;
    &lt;span&gt;3&lt;/span&gt;
    &lt;span&gt;4&lt;/span&gt;
    &lt;span&gt;5&lt;/span&gt;
    &lt;span&gt;6&lt;/span&gt;
    &lt;span&gt;7&lt;/span&gt;
    &lt;span&gt;8&lt;/span&gt;
  &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>What do i have to do to make this smooth when looping?</p>
  
  <p>thank you</p>