雖然標題很有詩意，但是要來實做的東西其實滿簡單的XD
拆解動畫效果，物件做 x 軸方向位移，背景不動。

首先先把架構跟class依序安排好

<div id="wrapper">
  <div class="XL-cloud">
    <div class="cloud"></div>
  </div>
  <div class="L-cloud">
    <div class="cloud"></div>
  </div>
  <div class="M-cloud">
    <div class="cloud"></div>
  </div>
</div>

然後來寫雲的大小跟外型的css

body{
  background-color:#00b4ff;
  overflow-x:hidden;
  height:100vh;
  margin:0;
  padding:0;
}

/*雲的本體造型*/
.cloud{
  background:#fff;
  width:160px;
  border-radius:200px;
  position:relative;
  height:40px;
  margin:30px 0 30px 0;
}
/*雲的造型*/
.cloud:after {
    content: "";
    width: 80px;
    height: 80px;
    position: absolute;
    background: #fff;
    display: inline-block;
    top: -40px;
    right: 20px;
    border-radius: 100%;
}
/*雲的造型*/
.cloud:before {
    content: "";
    width: 60px;
    height: 60px;
    position: absolute;
    background: #fff;
    display: block;
    top: -25px;
    left: 20px;
    border-radius: 100%;
}

這邊都寫完後，雲的雛形就出來了

接下來來寫動畫的部分

/*不同大小的雲 不同大小的雲跑的速度不同*/
.XL-cloud{
  transform:scale(1.2);
   animation: floating-cloud 20s 4s linear infinite;
  -webkit-animation: floating-cloud 20s 4s linear infinite;
  margin:50px 0px 50px 0px;
}

.L-cloud{
  animation: floating-cloud 26s 0.2s linear infinite;
  -webkit-animation: floating-cloud 26s 0.2s linear infinite;
  transform:scale(1.0);
  margin:40px 0px 40px 0px;
}
 
.M-cloud{
  animation: floating-cloud 16s 3s linear infinite;
  -webkit-animation: floating-cloud 16s 3s linear infinite;
  transform:scale(0.8);
}

/*關鍵影格部分*/
@keyframes floating-cloud{
      0%{margin-left:-600px;}
      100%{margin-left:100%;}
  } 

這樣基本上就完成了，附上本次實作的codepen網址~
差點就要開天窗了呢 好險XD
https://codepen.io/UHU/pen/WapxKe