JSFiddle - React, Tailwind, and code Playground

by luka kupunia

HTML

<div class="box">
    <div class="a"></div>
    <div class="b"></div>
    <div class="c"></div>
    <div class="d"></div>
</div>

CSS

body {
    margin: 0;
    background: black;
}
.box {
    width: 100%;
    height: 5px;
    position: relative;
}
.a {
    width: 100%;
    height: 100%;
    position: absolute;
    background: #bbbb1b;
    z-index: 1;
    animation: a cubic-bezier(0.79, 0.03, 0.25, 1) .5s both;
}
.b {
    width: 40%;
    height: 100%;
    position: absolute;
    background: #2e2ec7;
    z-index: 2;
    animation: a cubic-bezier(0, 0.42, 0.14, 1) .8s both .3s;
}
.c {
    width: 20%;
    height: 100%;
    position: absolute;
    background: #b52a2a;
    z-index: 3;
    animation: a cubic-bezier(0, 0.26, 0.25, 1) .65s both .15s;
}
.d {
    width: 60%;
    height: 100%;
    position: absolute;
    background: green;
    z-index: 1;
    animation: a cubic-bezier(0, 0.44, 0.25, 1) 1s both .35s;
}
@keyframes a{
    from {
        transform-origin: left;
        transform: scaleX(0);
    }
    to {
        transform-origin: left;
        transform: scaleX(1);
    }
}