-(1..100).each do |i|
  .b
View Compiled
$b:100;


html {
  height: 100%;
  width: 100%;
  background: linear-gradient(rgba(gray,0.8),white);
}

.b{
  border-radius:50%;
  float: left;
  margin-top: -50px;
  position: absolute;
  @for $i from 0 to $b {
    $rw:random(10)+1;
   
    $ra:random(20)+10;
    $rd:random(10)+1;
    
    $rc:random(10)+90;
    
                    
    &:nth-child(#{$i + 1}){
      margin-left: (percentage(1)/$b)*$i;
      width: $rw+px;
      height: $rw+px;
      background:hsla(0,0%,$rc,.8);
      box-shadow: 0 0 15px 10px hsla(0,0%,$rc,.5);
      animation: fall $ra+s $rd+s  infinite;
    }    
  }
}

@keyframes fall { 0% { transform: scale(0) }
                  2% { transform: scale(1); top: -50px; } 
                100% { transform: scale(0); top: 100%; } }
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. //cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js