<div class="circle"></div><div class="circle"></div><div class="circle"></div><div class="circle"></div><div class="circle"></div><div class="circle"></div><div class="circle"></div><div class="circle"></div><div class="circle"></div><div class="circle"></div><div class="circle"></div><div class="circle"></div><svg id="moon" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 28 28"> <path d="M20.51,18.49c1.23,0,2.42-0.26,3.57-0.79c0.42-0.19,0.8-0.12,1.12,0.2c0.149,0.149,0.24,0.319,0.27,0.529 c0.04,0.21,0.021,0.41-0.069,0.601c-0.98,2.109-2.45,3.8-4.431,5.069C19,25.36,16.85,25.99,14.51,25.99 c-1.62,0-3.18-0.311-4.65-0.95c-1.48-0.64-2.76-1.49-3.83-2.56C4.95,21.4,4.1,20.13,3.47,18.65c-0.64-1.48-0.96-3.03-0.96-4.66 c0-1.59,0.3-3.12,0.9-4.57c0.6-1.45,1.41-2.71,2.44-3.77C6.87,4.59,8.1,3.73,9.53,3.08c1.42-0.65,2.93-1.01,4.53-1.07 c0.459-0.02,0.77,0.18,0.95,0.61c0.19,0.42,0.11,0.8-0.229,1.12c-0.9,0.82-1.58,1.76-2.06,2.84c-0.47,1.08-0.71,2.21-0.71,3.41 c0,1.54,0.38,2.97,1.14,4.27c0.76,1.3,1.791,2.33,3.1,3.09C17.55,18.11,18.97,18.49,20.51,18.49z"/></svg>xxxxxxxxxx$colors: #F4C3D1, #E4A1BD, #D17FA8, #BA6090, #954B76, #743562, #5A2C56, #54214F, #461B46, #320F3B, #2C0A37, #250831;$r-start: 30px;$r-fade: 250px;/* --------------------------------- Mixins --------------------------------- */%center-align { transform: translate(-50%, -50%); transform: translate(-50%, -50%); transform: translate(-50%, -50%);}@mixin animation($name, $time) { animation: $name $time infinite; animation: $name $time infinite; animation: $name $time infinite; animation: $name $time infinite;}@mixin keyframes($name) { @-webkit-keyframes #{$name} { @content; } @-moz-keyframes #{$name} { @content; } @-ms-keyframes #{$name} { @content; } @keyframes #{$name} { @content; } }#moon { position: absolute; fill: #FCF8F4; fill-rule: evenodd; width: 20px; height: 20px; left: 50%; top: 50%; @extend %center-align;}/* --------------------------------- Circles --------------------------------- */.circle { width: $r-start; height: $r-start; border-radius: 50%; background-color: nth($colors, 1); position: absolute; opacity: 0; left: 50%; top: 50%; @extend %center-align; box-shadow: 0 0 2px rgba(0,0,0,0.1);}@for $i from 0 through 11 { .circle:nth-child(#{11}n+#{$i}) { @include animation(undulate, 5s); animation-delay: $i * 500ms; animation-delay: $i * 500ms; }}/* --------------------------------- Animation --------------------------------- */@include keyframes(undulate) { 0% { width: $r-start; height: $r-start; opacity: 1; } @for $i from 1 through length($colors) { $percent: 7% + 7 * $i; #{$percent} { background-color: nth($colors, $i); } } 100% { background-color: #150525; width: $r-fade; height: $r-fade; opacity: 0; }}/* --------------------------------- Global --------------------------------- */html,body { padding: 0; margin: 0; width: 100%; height: 100%; overflow: hidden; background-color: #150525;}xxxxxxxxxxvar circles = document.getElementsByClassName('circle');var addListener = function(circle, i) { circle.addEventListener('animationend', function() { console.log('done '); //circles[i].style.zIndex = '1'; }, false);}for(i = 0; i < circles.length - 1; i++) { addListener(circles[i], i);}