JSFiddle - React, Tailwind, and code Playground

by kybernaut

HTML

<div class="rectangle Animation"></div>

CSS

@-webkit-keyframes fadeIn {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }

}

@keyframes fadeIn {

    0% {

        opacity: 0;

    }

    100% {

        opacity: 1;

    }

}

.fadeIn {

    -webkit-animation-name: fadeIn;

    animation-name: fadeIn;

}

.rectangle {

    position:fixed;

    width: 300px;

    height: 36px;

    opacity:0.8;

    margin-top:215px;

    background: #212e84;

    z-index:1;

}

.firstAnimation {

    animation-name: fadeIn;

    -webkit-animation-name: fadeIn;

    -moz-animation-name: fadeIn;

    -webkit-animation-delay: 1s;

    animation-delay: 1s;

    -moz-animation-delay: 1s;

    -webkit-animation-duration: 3s;

    -moz-animation-duration: 3s;

    animation-duration: 3s;

    animation-fill-mode: forwards;

    -webkit-animation-fill-mode: forwards;

    -moz-animation-fill-mode: forwards;

}

@-webkit-keyframes movingbox {

    0% {

        left:0px;

    }

    100% {

        left:-157px;

    }

}
@-webkit-keyframes fadeIn {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }

}

@keyframes fadeIn {

    0% {

        opacity: 0;

    }

    100% {

        opacity: 1;

    }

}

.fadeIn {

    -webkit-animation-name: fadeIn;

    animation-name: fadeIn;

}

.rectangle {

    position:fixed;

    width: 300px;

    height: 36px;

    opacity:0.8;

    margin-top:215px;

    background: #212e84;

    z-index:1;

}

.firstAnimation {

    animation-name: fadeIn;

    -webkit-animation-name: fadeIn;

    -moz-animation-name: fadeIn;

    -webkit-animation-delay: 1s;

    animation-delay: 1s;

    -moz-animation-delay: 1s;

    -webkit-animation-duration: 3s;

    -moz-animation-duration: 3s;

    animation-duration: 3s;

    animation-fill-mode: forwards;

    -webkit-animation-fill-mode: forwards;

    -moz-animation-fill-mode: forwards;

}

@-webkit-keyframes movingbox {

    0% {

        left:0px;

    }

    100% {

        left:-157px;

    }

}

.thirdAnimation...