.rings
  - for (i = 0; i < 25; i++)
    .ring
      .ring_inner

body {
  background: #000;
  height: 100vh;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  perspective: 800px;
}

.rings {
  transform-style: preserve-3d;
  .ring {
    position: absolute;
    // transform: translate(-50%, -50%) rotateX(70deg);
    animation: rotate 5000ms cubic-bezier(0.545, 0.080, 0.520, 0.975) infinite alternate;
    transform-style: preserve-3d;
    .ring_inner {
      border-radius: 100%;
    }
    @for $i from 0 through 25 {
      &:nth-child(#{$i + 1}) .ring_inner {
        width: $i * 30px;
        height: $i * 30px;
        border: 1px solid rgba(30, 255 - $i * 10, 255 - $i * 2, 1);
        animation: wave 3000ms $i * 50ms cubic-bezier(0.545, 0.080, 0.520, 0.975) infinite;
        filter: drop-shadow(0 0 10px #fff);
      }
    }
  }
}

@keyframes rotate {
  0% {
    transform: translate(-50%, -50%) rotateX(65deg);
  }
  100% {
    transform: translate(-50%, -50%) rotateX(80deg);
  }
}

@keyframes wave {
  0% {
    transform: translateZ(0px);
  }
  8% {
    transform: translateZ(-60px);
  }
  20% {
    transform: translateZ(40px);
  }
  40% {
    transform: translateZ(-20px);
  }
  60% {
    transform: translateZ(10px);
  }
  80% {
    transform: translateZ(-5px);
  }
  100% {
    transform: translateZ(2px);
  }
}