<div class="wrap">
  

<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
  
  </div>
body{
  background: black;
}

@keyframes anima{
  from{
    transform: rotate(30deg);
    opacity: .2;
  }
  to{ 
    transform: rotate(-30deg);
    opacity: 1;
  }
}


.wrap{
  position:absolute;
  top:50%;
  right:50%;
  animation: animaWrap 50s ease infinite;
  transform: translate(50%,-50%)
}

.wrap > div{
  height: 50vh;
  background: #2196F3;
  width: 2px;
  opacity: 0;
  display: inline-block;
  animation: anima 5s calc(var(--t)) ease infinite alternate;
}

@for $i from 0 to 150 {
  div:nth-child(#{$i}) {
    --t: #{$i} * 0.05s;
  }
}

    


View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.