SOURCE

<div id='box'>
  <div class='cloud'></div>
  <div class='cloud'></div>
  <div class='cloud'></div>
  <div class='cloud'></div>
  <div class='cloud'></div>
</div>

$sky-bg:#68adf2;
$cloud-bg:#f2f9fe;
$sky-width:600px;
$sky-height:450px;

@mixin box-shadow($shadow...){
    -webkit-box-shadow:$shadow;
    box-shadow:$shadow;
}

@mixin after($width,$height,$top,$left){
    content:'';
    width:$width;
    height:$height;
    background-color:$cloud-bg;
    border-radius:50px;
    -webkit-border-radius:50px;
    -o-border-radius:50px;
    -moz-border-radius:50px;
    position:absolute;
    top:$top;
    left:$left;
}

@mixin transform($num){
	transform:scale($num);
  	-webkit-transform:scale($num);
}

@mixin animation($time){
	-webkit-animation:move $time infinite;
  	animation: move $time infinite;
}

#box{
    width:$sky-width;
    height:$sky-height;
    background-color:$sky-bg;
    overflow:hidden;
}

.cloud{
    width:$sky-width/4;
    height:$sky-height/8;
    background-color:$cloud-bg;
    border-radius:50px;
    -webkit-border-radius:50px;
    -o-border-radius:50px;
    -moz-border-radius:50px;
    position:relative;
  	left:-$sky-width/4;
}

@for $i from 1 through 5 {
    .cloud:nth-of-type(#{$i}):after{
        @include after(45,45,-20,25);
        @include box-shadow(45px -5px 0px 15px $cloud-bg);
    }
}


.cloud:nth-of-type(1){
  	@include transform(0.1);
  	@include animation(5s);
}
.cloud:nth-of-type(2){
  	@include transform(0.35);
  	@include animation(9s);
}
.cloud:nth-of-type(3){
  	@include transform(0.4);
  	@include animation(15s);
}
.cloud:nth-of-type(4){
  	@include transform(0.78);
  	@include animation(8s);
}
.cloud:nth-of-type(5){
  	@include transform(0.6);
  	@include animation(20s);
}

@-webkit-keyframes move{
  	to{
      transform:translateX(750px);
    }
}

@keyframes move{
  	to{
      transform:translateX(750px);
    }
}