.el
  - for (var i = 1; i <= 15; i++)
    div(class='el--'+i)

html,
body {
  height: 100%;
  background: #ffae36;
}

// 
// CSS Translate+Skew Animation
// 
// Created by @edmundojr_ for his new shine website

$round: false;

$el-size: 25px;
$el-amount: 15;
$el-border: rgba(255,255,255,.5);

// Parent

.el {
  position: absolute;
  top: 50%;
  left: 50%;

  // Single element
  
  > div {
    position: absolute;
    transform-origin: center;
    transform: translate(-50%,-50%);
    border: 2px solid $el-border;
    animation: pulse 6s infinite both;
    @if $round {
      border-radius: 50%;
    }
  }

  // Change size and add delay
  
  @for $i from 1 through $el-amount { 
    .el--#{$i} {
      width: (($el-size*2)*$i);
      height: (($el-size*2)*$i);
      animation-delay: .15s*$i;
    }
  }
}

// Animation

@keyframes pulse {
  0%  { opacity: 1;   transform: translate(-50%,-50%) skew(0,0); }
  20% { opacity: .25; transform: translate(-48%,-30%) skew(10deg,0); }
  35% { opacity: .75; transform: translate(-52%,-52%) skew(-5deg,-5deg); }
  60% { opacity: .25; transform: translate(-30%,-44%) skew(15deg,10deg); }
  75% { opacity: .5;  transform: translate(-55%,-52%) skew(-5deg,5deg); }
}

// No JS here :D