Css animation: Overlapping action

Overlapping principle.

by schrodingers

HTML

<script src="https://rawgithub.com/ai/autoprefixer-rails/master/vendor/autoprefixer.js"></script>
<ul class="overlapping">
    <li class="stripe"></li>
    <li class="stripe"></li>
    <li class="stripe"></li>
    <li class="stripe"></li>
    <li class="stripe"></li>
    <li class="stripe"></li>
    <li class="stripe"></li>
    <li class="stripe"></li>
    <li class="stripe"></li>
    <li class="stripe"></li>
</ul>

SCSS

$palette: #d20962, #f47721, #7ac143, #00a78e, #00bce4, #7d3f98, #0079bf, #70b500, #ff9f1a, #eb5a46, #f2d600, #c377e0, #ff78cb, #00c2e0, #51e898, #c4c9cc;
$num: 10;

 html {
    box-sizing: border-box;
    font-size: 62.5%;
}
.overlapping {
    min-height: 20rem;
    display: flex;
    justify-content: cemter;
    align-items: flex-end;
    border-top: 1rem solid ghostwhite;
}
.stripe {
    
    background: currentColor;
    width: 15%;
    height: 1rem;
    margin-right: 0.1rem;
    transform-origin: center bottom;
}

@keyframes rise {
    100% {
        transform: scale3D(1, 20, 5);
    }    
}

@for $i from 1 through $num {
  .stripe:nth-of-type(#{$i}){
    background-color: nth($palette, $i);
    animation: rise 1s infinite alternate cubic-bezier(.53, .14, .83, .67);
    animation-delay: (100)*$i+ms;              }
}