SCSS
@import 'compass/css3';
body { background: #333; }
.container {
position: relative;
width: 100vw;
height: 100vh;
.circle {
position: absolute;
top: 50%;
left: 50%;
border: 5px solid #3498db;
@include border-radius(50%);
$count: 8;
@for $i from 1 through $count {
&:nth-child(#{$i}) {
@include animation(grow 3s #{(.5*$i)}s infinite ease-out);
}
}
}
}
@include keyframes(grow) {
100% {
padding: 200px;
border-color: #2ecc71;
margin: -200px 0 0 -200px;
opacity: 0;
}
}
