JSFiddle - React, Tailwind, and code Playground

by kougiland

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<div class="bar" id='div_1'></div>
<div class="bar" id='div_2'></div>
<div class="bar" id='div_3'></div>
<div class="bar" id='div_4'></div>
<div class="bar" id='div_5'></div>
<div class="bar" id='div_6'></div>
<div class="bar" id='div_7'></div>
<div class="bar" id='div_8'></div>
<div class="bar" id='div_9'></div>

CSS

.bar{
    height: 25px;
    margin-top: 10px;
    background: #0CFF0E;
}

#div_1 {
  width: 200px;
    animation: bar 1s linear forwards;
}

#div_2 {
   width: 170px;
    animation: 1s bar .15s linear forwards;
}

#div_3 {
   width: 100px;
    animation: 1s bar .30s linear forwards;
}

#div_4 {
   width: 150px;
    animation: 1s bar .45s linear forwards;
}

#div_5 {
   width: 75px;
    animation: 1s bar .60s linear forwards;
}

#div_6 {
   width: 250px;
    animation: 1s bar .75s linear forwards;
}

#div_7 {
   width: 275px;
    animation: 1s bar .90s linear forwards;
}

#div_8 {
   width: 175px;
    animation: 1s bar 1.05s linear forwards;
}

#div_9 {
   width: 130px;
   animation: 1s bar 1.30s linear forwards;
}
@keyframes bar{
    from{width: 0}
}