JSFiddle - React, Tailwind, and code Playground

by luka kupunia

HTML

<div class="img"></div>
<div class="img" style="animation-delay: .1s"></div>
<div class="img" style="animation-delay: .2s"></div>
<div class="img" style="animation-delay: .4s"></div>
<div class="img" style="animation-delay: .5s"></div>
<div class="img" style="animation-delay: .6s"></div>

CSS

body {
  background: black;
}
div.img {
  width: 400px;
  height: 500px;
  background: url(https://d1doqjmisr497k.cloudfront.net/-/media/mccormick-us/recipes/grill-mates/t/800/the_works_steak_burger_800x800.ashx?vd=20180710T030335Z&hash=0855426A9F8EBB2748EA372EFC6E3C839D992B08);
  transform: scaleY(1.4);
  background-size: cover;
  background-position: center;
  opacity: 0;
  display: inline-block;
  animation: a 2s cubic-bezier(0.71, 0.04, 0.25, 1) both;
  margin: 50px;
  transform-origin: top;
}
@keyframes a {
  from { transform: scaleY(1.7) translateY(50px); opacity: 0;}
  to { transform: scale(1) translateY(0); opacity: 1; }
}