title: Smooth infinite animation flow with CSS
body: <p>I am trying to have a stack of images float infinitely across a block from top to bottom. To achieve that, I need the first (top) element from the stack to start floating right after the last element. What happens, in reality, is that the first element starts floating only after the last element reaches its destination, which causes a break in the flow. I tried playing with <code>animation-delay</code>, but it didn't help (or I didn't do the right thing).</p>
  
  <p><a href="https://jsfiddle.net/amhara/6xwrtjgv/21/" rel="nofollow noreferrer">Here's the demo</a>
  Here's the code: </p>
  
  <pre><code>HTML:
  &lt;div class='one'&gt;
  &lt;/div&gt;
  &lt;div class='two'&gt;
   &lt;div class='four'&gt;
   &lt;/div&gt;
   &lt;div class='four'&gt;
   &lt;/div&gt;
   &lt;div class='four'&gt;
   &lt;/div&gt;
   &lt;div class='five'&gt;
   &lt;/div&gt;
   &lt;div class='five'&gt;
   &lt;/div&gt;
   &lt;div class='five'&gt;
   &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class='three'&gt;
  &lt;/div&gt;
  
  CSS:
  .one, .two, .three {
   width: 300px;
   height: 300px;
  }
  .one, .three {
   background: yellow;
   position: relative;
   z-index: 2;
  }
  .two {
   background: red;
  }
  .four, .five {
   width: 100px;
   height: 50px;
   margin-bottom: 10px;
   position: relative;
   animation-name: slide;
   animation-duration: 4s;
   animation-iteration-count: infinite;
   animation-timing-function: linear;
  }
  .four {
   background: blue;
  }
  .five {
   background: purple;
  }
  
   @keyframes slide {
       from { top: 300px;}
       to {top: -300px;}
  }
  </code></pre>