<div class="center">
  <div id = "cloud"></div>
</div>

body {
  background: rgba(0, 176, 255, .7);
}

.center {
  position: absolute;
  top:50%;
  left:50%;
  transform: translate(-50%,-50%);
}

#cloud {
  background: rgba(255, 255, 255);
  width: 300px; 
  height: 100px;
  border-radius: 150px; 
  box-shadow: 10px 10px rgba(0,0,0,0.2);
  animation: move 3s infinite;
}

#cloud:after {
  content: '';
  background: rgba(255, 255, 255);
  position: absolute;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  top: -50px;
  left: 50px;
}

#cloud:before {
  content: '';
  background: rgba(255, 255, 255);
  position: absolute;
  width: 170px;
  height: 150px;
  border-radius: 50%;
  top: -90px;
  right: 40px;
}

@keyframes move {
  0% {
    transform: translatex(0);
  }
  50% {
    transform: translatex(-40px);
  }
}