<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: #00BCD4;
}

@keyframes anima{
  from{
    transform: translate(20px);
    background: #AA00FF;
  }
  to{ 
    transform: translate(-20px);
    background: #FFCCBC;
  }
}
.wrap{
  position:absolute;
  top:50%;
  right:50%;
  transform:translate(50%,-50%) rotate(45deg);
}
.wrap > div{
  height: 50vh;
  width: 5px;
  margin-right: 5px;
  display: inline-block;
  animation: anima 1s calc(var(--t)) ease-in-out infinite alternate;
}

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

    


View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.