<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>
body{
  background: black;
}

@keyframes anima{
  from{
    transform: rotate(10deg);
    opacity: .5;
    background: blue;
  }
  to{ 
    transform: rotate(-2deg);
    opacity: 1;
  }
}
.wrap{
  position:absolute;
  top:50%;
  right:50%;
  transform:translate(50%,-50%)
}
.wrap > div{
  height: 50vh;
  background: red;
  width: 5px;
  margin-right:10px;
  opacity: 0;
  display: inline-block;
  animation: anima 1s 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.