<img id="bigcloud" alt="#" class="cloud" height="154" src="https://www.kirupa.com/images/bigCloud.png" width="238">
<img id="smallcloud" alt="#" class="cloud" height="103" src="https://www.kirupa.com/images/smallCloud.png" width="158">

body{
  background-color: #A2BFCE;
  padding: 10px;
}
.cloud {
  position: absolute;
}
@keyframes bobble {
  0% {
    transform: translate3d(50px, 40px, 0px);
    animation-timing-function: ease-in;
  }
  50% {
    transform: translate3d(60px, 50px, 0px);
    animation-timing-function: ease-out;
  }
  100% {
    transform: translate3d(50px, 40px, 0px);
  }
}

#bigcloud {
  margin-left: 100px;
  margin-top: 15px;
  animation: bobble 2s infinite;
}

#smallcloud {
  animation: bobble 4s infinite;
  margin-top: 65px;
  margin-left: 200px;
}