JSFiddle - React, Tailwind, and code Playground

by adderrrr

HTML

<div class="boxs">
    <div></div>
    <div></div>
    <div></div>
</div>

CSS

div.boxs div {
    width:50px;
    height: 50px;
    background: red;
    display: inline-block;
    margin: 5px;
}
@-webkit-keyframes show{
	from {opacity : 0;}
	to {opacity : 1;}
}
@keyframes show {
	from {opacity : 0;}
	to {opacity : 1;}
}
div.boxs div:nth-child(1){
    -webkit-animation: show 1s;
    animation: show 1s;
    
    -webkit-animation-delay: 0s;
    animation-delay: 0s;
}
div.boxs div:nth-child(2){
    -webkit-animation: show 1s;
    animation: show 1s;
    
    -webkit-animation-delay: 1s;
    animation-delay: 1s;
}
div.boxs div:nth-child(3){
    -webkit-animation: show 1s;
    animation: show 1s;
    
    -webkit-animation-delay: 2s;
    animation-delay: 2s;
}