$scale: 0.33;
$delta: 5;

$color: rgba(186,166,158,0.5);

$n: 20;

@keyframes a {
  0% { margin-top: -80px; margin-left: 0px; }
  33% { margin-top: 20px; margin-left: 0px; }
  66% { margin-top: -80px; margin-left: 0px; }
  100% { margin-top: 20px; margin-left: 0px; }
}

@for $i from 0 through $n {
  .oval#{$i} {
    position: absolute;
    width: 250px;
    height: 400px; 

    top: #{$delta*$i}px;
    left: 40%;
        
    background-color: darken($color, $i / $n * 100 );
  
    animation-name: a;
    animation-duration: 3s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-play-state: running;
    animation-fill-mode: backwards;    
    animation-delay: #{$i / 10}s;
    
    z-index: #{$n - $i};
    
    border-radius: 50%;
    box-shadow: 0px 4px 10px 1px #333;
    
    
    transform-origin: 50% 50%;
    transform: scale(sin($i / $n * pi())) scaleY(0.3);
  }
}




// background

html {
  height: 100%;
  background: rgba(241,231,103,1);
  background: -moz-linear-gradient(top, rgba(241,231,103,1) 0%, rgba(254,182,69,1) 100%);
  background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(241,231,103,1)), color-stop(100%, rgba(254,182,69,1)));
  background: -webkit-linear-gradient(top, rgba(241,231,103,1) 0%, rgba(254,182,69,1) 100%);
  background: -o-linear-gradient(top, rgba(241,231,103,1) 0%, rgba(254,182,69,1) 100%);
  background: -ms-linear-gradient(top, rgba(241,231,103,1) 0%, rgba(254,182,69,1) 100%);
  background: linear-gradient(to bottom, rgba(241,231,103,1) 0%, rgba(254,182,69,1) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f1e767', endColorstr='#feb645', GradientType=0 );
}