JSFiddle - React, Tailwind, and code Playground

by lemon kazi

HTML

<div class="container">

    
    <div class="aggettivi">
        <div class="text-animated-one">awsome</div>    
        <div class="text-animated-two">invincible</div>
    </div>


</div>

CSS

@-webkit-keyframes fade-in{
    from{
        opacity:1;
        top:0px;
    }
    to{
        opacity:0;
        top:-50px;
    }
}
.text-animated-one{
    display:inline;
    position:relative;
    top:0px;
    -webkit-animation:fade-in 5s infinite;
    height:200px;
     width:200px;
     background:black;
     float: left;
     

}
.text-animated-two{
    opacity:0;
    display:inline;
    position:relative;
    margin-left:-56px;
    -webkit-animation:fade-in 5s infinite;
    -webkit-animation-delay:2.5s;
    height:200px;
     width:200px;
    background:red;
    float: left;
}

.aggettivi{
    display:inline;
    width:200px;
    height:200px;
    font-size:20px;
    float: left;
}