#frame
  -(1..100).each do |i|
    .box

$discs: 100; $color: 18; $ease: 9s ease-in; $delay: .1s;

html{
overflow: hidden;
}

#frame {
position: absolute;
transform:rotate(45deg) translate(-50%,50%);
top: 0; left: 0; right: 0; bottom: 0;
width: 800%; height: 800%;
display: table; 
@for $i from 1 through $discs {
.box {
position: relative;
width: 1%; height: 10%;
display: table-cell;
&:nth-child( #{$i} ) {
background: hsl($color * $i, 45%, 55%);
-webkit-animation: width $ease $delay * $i infinite alternate;
}
}
}
}
@-webkit-keyframes width { 10% { width: 0; } 
}