title: How do I make an animation start from the current location of the div?
body: <p>Basically title. This is a small part of my code:</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.floor {
      position: absolute;
      top: 140px;
      height: 10px;
      width: 200px;
      animation: floorAnimation 2s infinite linear;
  }
  
  #floor1 {
      right: -200px;
      background-color: red;
  }
  
  #floor2 {
      right: 0px;
      background-color: green;
  }
  
  #floor3 {
      right: 200px;
      background-color: blue;
  }
  
  #floor4 {
      right: 400px;
      background-color: yellow;
  }
  
  #floor5 {
      right: 600px;
      background-color: orange;
  }
  
  #floor6 {
      right: 800px;
      background-color: purple;
  }
  
  #floor7 {
      right: 1000px;
      background-color: brown;
  }
  
  @keyframes floorAnimation {
      from {
          right: -200px;
      }
      to {
          right: 1000px;
      }
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id = "floor1" class = "floor"&gt;&lt;/div&gt;
  &lt;div id = "floor2" class = "floor"&gt;&lt;/div&gt;
  &lt;div id = "floor3" class = "floor"&gt;&lt;/div&gt;
  &lt;div id = "floor4" class = "floor"&gt;&lt;/div&gt;
  &lt;div id = "floor5" class = "floor"&gt;&lt;/div&gt;
  &lt;div id = "floor6" class = "floor"&gt;&lt;/div&gt;
  &lt;div id = "floor7" class = "floor"&gt;&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>Notice how the <code>right</code>  of each div id is different, but on the animation itself, all of them start from <code>right: -200px;</code> -right now, they all teleport to -200px and overlap with themselves and do the animation at once.</p>
  <p>How do I make it that for example, instead of all immediately starting on <code>right: -200px;</code>, each div would finish the first iteration from it's current <code>right</code>  and then on the second iteration it would teleport to <code>right: -200px;</code> and continue the animation as normal?</p>