<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>

body{
  background: #E0F7FA;
}

@keyframes anima{
  from{
    transform: rotate(0deg);
  }
  to{ 
    transform: rotate(360deg);
  }
}

@keyframes animaWrap{
  from{
    transform: translate(50%,-50%) rotate(300deg);
    
  }
  to{ 
    transform: translate(50%,-50%) rotate(0deg);
    
  }
}
.wrap{
  position:absolute;
  top:50%;
  right:50%;
  animation: animaWrap 50s ease infinite;
}
.wrap > div{
  width: 5px;
  height: 50px;
  background: #0097A7;
  margin:1px;
  opacity: 1;
  display: inline-block;
  animation: anima 1s calc(var(--t)) ease infinite;
}

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