JSFiddle - React, Tailwind, and code Playground

by Manna

HTML

<div class="myClass">
    <img src="http://placehold.it/200x150" />
    <img src="http://placehold.it/200x150" />
    <img src="http://placehold.it/200x150" />
    <img src="http://placehold.it/200x150" />
</div>

CSS

@-webkit-keyframes FadeIn { 
  0% { opacity:0; -webkit-transform:scale(0.7);}
  85% {opacity:1; -webkit-transform:scale(1.05);}
  100% {-webkit-transform:scale(1); }
}

.myClass img { float: left; margin: 20px; -webkit-animation: FadeIn 1s linear; -webkit-animation-fill-mode:both; }
.myClass img:nth-child(1){ -webkit-animation-delay: .2s }
.myClass img:nth-child(2){ -webkit-animation-delay: .3s }
.myClass img:nth-child(3){ -webkit-animation-delay: .5s }
.myClass img:nth-child(4){ -webkit-animation-delay: .7s }