title: CSS animation, absolute position go off screen to right and come back from left
body: <p>I am making a site with some clouds. I want the clouds to move across the screen from left to right. I have the clouds moving but am a little stuck on one aspect. I want some of the clouds to be on screen when the page loads.  I want those clouds to start moving and go off screen to the right, then come back in from the left and keep on going. </p>
  
  <p>Here is an image that may explain it a little better:
  <a href="https://i.stack.imgur.com/KINRM.jpg" rel="noreferrer"><img src="https://i.stack.imgur.com/KINRM.jpg" alt="enter image description here"></a></p>
  
  <p>Here is the code:</p>
  
  <pre><code>&lt;div class="clouds"&gt;
      &lt;div class="firstCloud"&gt;        
          &lt;svg id="svgCloud" data-name="clouder" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 348 164"&gt;&lt;defs&gt;&lt;style&gt;.cloud1Fill{fill:#d1dbd9;}&lt;/style&gt;&lt;/defs&gt;&lt;title&gt;Untitled-5&lt;/title&gt;&lt;path class="cloud1Fill" d="M348,107.5a54.5,54.5,0,0,1-94.87,36.61,77.55,77.55,0,0,1-81.57-1.43A73,73,0,0,1,71,145.07,42.48,42.48,0,1,1,49.61,71.59,73,73,0,0,1,154.85,26.84,77.51,77.51,0,0,1,287.16,53.37,53,53,0,0,1,293.5,53,54.5,54.5,0,0,1,348,107.5Z"/&gt;&lt;/svg&gt;
      &lt;/div&gt;  
      &lt;div class="secondCloud"&gt;
          &lt;svg id="svgCloud2" data-name="cloud2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 291 124"&gt;&lt;defs&gt;&lt;style&gt;.cloud1Fill{fill:#d3dddb;}.cloud2Fill{fill:#fff;}&lt;/style&gt;&lt;/defs&gt;&lt;title&gt;Untitled-4&lt;/title&gt;&lt;path class="cloud1Fill" d="M2.29,123.5A41,41,0,0,1,58.37,74.12l.32.14.24-.25A45.72,45.72,0,0,1,91.5,60.5q1.14,0,2.25.06l.43,0,.09-.41a76,76,0,0,1,148.46,0l.09.4h.41l1.27,0a46.06,46.06,0,0,1,46,46,45.53,45.53,0,0,1-3.26,17Z"/&gt;&lt;path class="cloud2Fill" d="M168.5,1a75.53,75.53,0,0,1,73.74,59.23l.18.81.82,0,1.26,0a45.49,45.49,0,0,1,42.4,62H2.66A40.53,40.53,0,0,1,58.17,74.57l.63.29.49-.49A45.2,45.2,0,0,1,91.5,61c.75,0,1.5,0,2.23.06l.85,0,.18-.83A75.51,75.51,0,0,1,168.5,1m0-1A76.52,76.52,0,0,0,93.78,60.06Q92.66,60,91.5,60A46.35,46.35,0,0,0,58.58,73.66,41.52,41.52,0,0,0,1.92,124H287.58A46.5,46.5,0,0,0,244.5,60l-1.28,0A76.53,76.53,0,0,0,168.5,0Z"/&gt;&lt;/svg&gt;
      &lt;/div&gt;
      &lt;div class="thirdCloud"&gt;
          &lt;svg id="svgClouds3" data-name="clouds2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 329 139"&gt;&lt;defs&gt;&lt;style&gt;.cloud2Fill{fill:#d1dbd9;}&lt;/style&gt;&lt;/defs&gt;&lt;title&gt;Untitled-6&lt;/title&gt;&lt;path class="cloud2Fill" d="M329,125a40.09,40.09,0,0,1-2.52,14H14.9A61.28,61.28,0,0,1,0,99C0,64.21,29.33,36,65.5,36a67.34,67.34,0,0,1,30,7A86,86,0,0,1,236.42,31.37,55.53,55.53,0,0,1,311,83.5a56.67,56.67,0,0,1-.55,7.75A39.93,39.93,0,0,1,329,125Z"/&gt;&lt;/svg&gt;
      &lt;/div&gt;    
  &lt;/div&gt;
  
  .firstCloud {
      position: absolute;
      left: 0;
      top: 150px;
      animation: move 50s linear 2s infinite;
      width: 150px;
  }
  
  .secondCloud {
      position: absolute;
      left: 50%;
      top: 200px;
      animation: move 55s linear 0s infinite backwards;
      width: 150px;
  }
  
  .thirdCloud {
      top: 250px;
      left: 10%;
      position: absolute;
      animation: move 60s linear 10s infinite backwards;
      width: 150px;
  }
  
  @-webkit-keyframes move {
    from {-webkit-transform: translateX(-400px);}
    to {-webkit-transform: translateX(2000px);}
  }
  </code></pre>
  
  <p>Here is a <a href="https://codepen.io/west4me/pen/ypBKME" rel="noreferrer" title="codepen">codepen</a></p>
  
  <p>I've searched around but I think my Google-Fu has failed me in what to search for. Can anyone point me in the right direction?</p>