Как сделать такой движущий объект с помощью CSS?

* { 
  padding: 0; 
  margin: 0; 
  box-sizing: border-box; 
} 
section { 
  height: 300px; 
  background: blue; 
  position: relative; 
} 
.clouds img { 
  position: absolute; 
  top: 0; 
} 
.clouds img.cloud1 { 
  top: 30px; 
  animation: cloud1 45s linear 1s infinite; 
  opacity: 0 
} 
@keyframes cloud1 { 
  0% { 
    opacity: 0; 
    right: 0 
  } 
  10% { 
    opacity: 1; 
    right: 70px 
  } 
  90% { 
    opacity: 1; 
    right: 1000px 
  } 
  100% { 
    opacity: 0; 
    right: 1088px 
  } 
} 
.clouds img.cloud2 { 
  top: 25px; 
  animation: cloud2 35s linear 6s infinite; 
  opacity: 0 
} 
@keyframes cloud2 { 
  0% { 
    opacity: 0; 
    right: 0 
  } 
  10% { 
    opacity: 1; 
    right: 70px 
  } 
  90% { 
    opacity: 1; 
    right: 1000px 
  } 
  100% { 
    opacity: 0; 
    right: 1088px 
  } 
} 
.clouds img.cloud3 { 
  top: 115px; 
  animation: cloud3 30s linear 11s infinite; 
  opacity: 0 
} 
@keyframes cloud3 { 
  0% { 
    opacity: 0; 
    right: 0 
  } 
  10% { 
    opacity: 1; 
    right: 70px 
  } 
  90% { 
    opacity: 1; 
    right: 1000px 
  } 
  100% { 
    opacity: 0; 
    right: 1088px 
  } 
} 
.clouds img.cloud4 { 
  top: 70px; 
  animation: cloud4 55s linear 16s infinite; 
  opacity: 0 
} 
@keyframes cloud4 { 
  0% { 
    opacity: 0; 
    right: 0 
  } 
  10% { 
    opacity: 1; 
    right: 70px 
  } 
  90% { 
    opacity: 1; 
    right: 1000px 
  } 
  100% { 
    opacity: 0; 
    right: 1088px 
  } 
} 
.clouds img.cloud5 { 
  top: 200px; 
  animation: cloud5 25s linear 20s infinite; 
  opacity: 0 
} 
@keyframes cloud5 { 
  0% { 
    opacity: 0; 
    right: 0 
  } 
  10% { 
    opacity: 1; 
    right: 70px 
  } 
  90% { 
    opacity: 1; 
    right: 1000px 
  } 
  100% { 
    opacity: 0; 
    right: 1088px 
  } 
}

<section> 
  <div class="clouds"> 
    <img src="https://www.xeovo.com/img/clouds/cloud-1.png" alt="Cloud" class="cloud1"> 
    <img src="https://www.xeovo.com/img/clouds/cloud-2.png" alt="Cloud" class="cloud2"> 
    <img src="https://www.xeovo.com/img/clouds/cloud-3.png" alt="Cloud" class="cloud3"> 
    <img src="https://www.xeovo.com/img/clouds/cloud-4.png" alt="Cloud" class="cloud4"> 
    <img src="https://www.xeovo.com/img/clouds/cloud-5.png" alt="Cloud" class="cloud5"> 
  </div> 
</section>