JSFiddle - React, Tailwind, and code Playground

HTML

<div class="fade-in one"></div>
<div class="fade-in two"></div>
<div class="fade-in three"></div>

CSS

@-webkit-keyframes fade-in {
0% { opacity: 0; -webkit-transform: scale(.1);}
85% {opacity: 1; -webkit-transform: scale(1.05);}
100% {-webkit-transform: scale(1); opacity: 1;}
}

.fade-in {
    -webkit-animation: fade-in .5s ease-in;
    -webkit-animation-fill-mode: forwards;
    -webkit-animation-iteration-count: 1;
    background-color: #000;
    width: 100px;
    height: 100px;
    opacity: 0;
}

.fade-in.one {-webkit-animation-delay: .5s;}
.fade-in.two {-webkit-animation-delay: 1.5s;}
.fade-in.three {-webkit-animation-delay: 2.5s;}