title: Animating moving clouds with pure CSS
body: <p>I am trying to create something like the image below just with a CSS animation where the clouds are moving. <img src="https://www.turbotobias.dk/wp-content/uploads/2019/04/cloud-image.jpg" alt="image"></p>
  
  <p>I made the clouds as an SVG and created the animation. However, I am having a hard time positioning the clouds. I created ten clouds but only a couple of shows with a hard time fit different screen sizes. How should I go about creating these 10 clouds slowly moving across the screen?</p>
  
  <p>Also, how should I go about creating the clouds divider at the bottom of the image above? Should I create this as an SVG background or how can I achieve this with CSS? </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>*{ margin: 0; padding: 0;}
  
  body {
     width: 100%;
      height: 100%;
      margin: 0;
      overflow: hidden;
  }
  
  #clouds{
   background-color: #272b36!important;
  }
  
  .cloud {
   width: 400px; height: 100px;
   background-image: url(https://www.turbotobias.dk/wp-content/uploads/2019/03/White-cloud-type3.svg);
   position: relative; 
    background-repeat: no-repeat;
  }
  
  /* create all of the clouds */
  .sky1 {
    opacity: 0.4;
   -webkit-animation: moveclouds 45s linear infinite;
   -moz-animation: moveclouds 45s linear infinite;
   -o-animation: moveclouds 45s linear infinite;
  }
  
  .sky2 {
   left: 200px;
   
   -webkit-transform: scale(0.6);
   -moz-transform: scale(0.6);
   transform: scale(0.6);
   opacity: 0.4;
   
   -webkit-animation: moveclouds 50s linear infinite;
   -moz-animation: moveclouds 50s linear infinite;
   -o-animation: moveclouds 50s linear infinite;
  }
  
  .sky3 {
   left: -250px; top: -200px;
   
   -webkit-transform: scale(0.8);
   -moz-transform: scale(0.8);
   transform: scale(0.8);
   opacity: 0.4;
   
   -webkit-animation: moveclouds 60s linear infinite;
   -moz-animation: moveclouds 60s linear infinite;
   -o-animation: moveclouds 60s linear infinite;
  }
  
  .sky4 {
   left: 470px; top: -250px;
   
   -webkit-transform: scale(0.75);
   -moz-transform: scale(0.75);
   transform: scale(0.75);
   opacity: 0.4;
   
   -webkit-animation: moveclouds 65s linear infinite;
   -moz-animation: moveclouds 65s linear infinite;
   -o-animation: moveclouds 65s linear infinite;
  }
  
  .sky5 {
   left: -150px; top: -150px;
   
   -webkit-transform: scale(0.8);
   -moz-transform: scale(0.8);
   transform: scale(0.8);
   opacity: 0.4;
   
   -webkit-animation: moveclouds 55s linear infinite;
   -moz-animation: moveclouds 55s linear infinite;
   -o-animation: moveclouds 55s linear infinite;
  }
  
  .sky6 {
   left: 470px; top: -270px;
   
   -webkit-transform: scale(0.75);
   -moz-transform: scale(0.75);
   transform: scale(0.75);
   opacity: 0.4;
   
   -webkit-animation: moveclouds 65s linear infinite;
   -moz-animation: moveclouds 65s linear infinite;
   -o-animation: moveclouds 65s linear infinite;
  }
  
  .sky7 {
   left: 470px; top: -375px;
   
   -webkit-transform: scale(0.75);
   -moz-transform: scale(0.75);
   transform: scale(0.75);
   opacity: 0.4;
   
   -webkit-animation: moveclouds 65s linear infinite;
   -moz-animation: moveclouds 65s linear infinite;
   -o-animation: moveclouds 65s linear infinite;
  }
  
  .sky8 {
   left: 470px; top: -350px;
   
   -webkit-transform: scale(0.75);
   -moz-transform: scale(0.75);
   transform: scale(0.75);
   opacity: 0.4;
   
   -webkit-animation: moveclouds 65s linear infinite;
   -moz-animation: moveclouds 65s linear infinite;
   -o-animation: moveclouds 65s linear infinite;
  }
  
  .sky9 {
   left: 470px; top: -150px;
   
   -webkit-transform: scale(0.75);
   -moz-transform: scale(0.75);
   transform: scale(0.75);
   opacity: 0.4;
   
   -webkit-animation: moveclouds 65s linear infinite;
   -moz-animation: moveclouds 65s linear infinite;
   -o-animation: moveclouds 65s linear infinite;
  }
  
  .sky10 {
   left: 470px; top: -450px;
   
   -webkit-transform: scale(0.75);
   -moz-transform: scale(0.75);
   transform: scale(0.75);
   opacity: 0.4;
   
   -webkit-animation: moveclouds 65s linear infinite;
   -moz-animation: moveclouds 65s linear infinite;
   -o-animation: moveclouds 65s linear infinite;
  }
  
  /* create the animation */
  
  @-webkit-keyframes moveclouds {
   0% {margin-left: 1000px;}
   100% {margin-left: -1000px;}
  }
  @-moz-keyframes moveclouds {
   0% {margin-left: 1000px;}
   100% {margin-left: -1000px;}
  }
  @-o-keyframes moveclouds {
   0% {margin-left: 1000px;}
   100% {margin-left: -1000px;}
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="clouds"&gt;
    &lt;div class="cloud sky1"&gt;&lt;/div&gt;
    &lt;div class="cloud sky2"&gt;&lt;/div&gt;
    &lt;div class="cloud sky3"&gt;&lt;/div&gt;
    &lt;div class="cloud sky4"&gt;&lt;/div&gt;
    &lt;div class="cloud sky5"&gt;&lt;/div&gt;
    &lt;div class="cloud sky6"&gt;&lt;/div&gt;
    &lt;div class="cloud sky7"&gt;&lt;/div&gt;
    &lt;div class="cloud sky8"&gt;&lt;/div&gt;
    &lt;div class="cloud sky9"&gt;&lt;/div&gt;
    &lt;div class="cloud sky10"&gt;&lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
      </p>