<div class="cloud">
	<div class="puffs"></div>
  <div class="rain">
  	<div class="drop"></div>
     <div class="drop"></div>
     <div class="drop"></div>
     <div class="drop"></div>
     <div class="drop"></div>
  </div>
</div>

$color1: #0e83cd;
$color2: white;

$animation-time: 4s;

*, *:before, *:after{
  box-sizing: border-box;
}
body {
  background: $color1;
  color: $color2;
}

.cloud{
  position: absolute;
  top: 50%;
  left: 50%;
  width: 105px;
  height: 30px;
  transform: translate(-50%, -50%);
  &:after {
    content: "";
    display: block;
    position: absolute;
 	width: 80%;
    height: 10px;
    transform: translateX(15%);
    left: 0;
    bottom: -80px;
    border-radius: 100%;
    background: darken($color1, 1.5);
    animation: shadow $animation-time 0s infinite normal both;
  }
  .puffs {
    animation: cloud $animation-time 0s infinite normal both;
    top: 0;
    border-radius: 50% 50% 50% 50%;
    left: 0;
    background: $color2;
    position: absolute;
    width: 30px;
    height: 30px;
    box-shadow: 25px 0, 50px 0, 75px 0,
      12.5px -7.5px darken($color2, 4), 37.5px -7.5px darken($color2, 4), 62.5px -7.5px darken($color2, 4),
      12.5px 7.5px darken($color2, 4), 37.5px 7.5px darken($color2, 4), 62.5px 7.5px darken($color2, 4),
      12.5px+12.5 -15px darken($color2, 8), 37.5px+12.5 -15px darken($color2, 8),
      12.5px+12.5 15px darken($color2, 8), 37.5px+12.5 15px darken($color2, 8);
  }
  .rain .drop {
    width: 3px;
    height: 5px;
    border-radius: 50%;
    background: darken($color1, 8);
    position: absolute;
    z-index: -2;
    opacity: 0;

    @for $i from 0 through 5 {
      &:nth-child(#{$i}) {
        animation: rain 1s #{$i*300}ms infinite normal both;
        left: 17px*$i;
      }
    }
  }
}


@keyframes cloud {
  50% {
  	transform: translateY(-12px);
  }
}
@keyframes shadow {
  50% {
		width: 70%;
      transform: translateX(22%);
    
  }
}
@keyframes rain {
  10% {
	 opacity: 1; 
  }
  90% {
    transform: translateY(90px);
  }
}