JSFiddle - React, Tailwind, and code Playground

HTML

<div class="list">
  <div class="item">
    <img src="https://bo3li.files.wordpress.com/2011/05/drive-angry-movie-cover.jpg">
  </div>

  <div class="item">
    <img src="http://www.tolkienlibrary.com/press/images/movie-tie-in-The-hobbit.jpg">
  </div>

  <div class="item">
    <img src="http://netdna.webdesignerdepot.com/uploads/2011/02/jurassicpark.jpg">
  </div>

  <div class="item">
    <img src="http://posterwire.com/wp-content/uploads/lord_of_war.jpg">
  </div>

  <div class="item">
    <img src="https://davebrendon.files.wordpress.com/2010/12/i-am-number-four-movie-poster.jpg">
  </div>

  <div class="item">
    <img src="http://gdj.gdj.netdna-cdn.com/wp-content/uploads/2011/12/grey-movie-poster.jpg">
  </div>

  <div class="item">
    <img src="https://s-media-cache-ak0.pinimg.com/originals/e2/81/9d/e2819de0653c516f0e242038770fa3b8.jpg">
  </div>

  <div class="item">
    <img src="http://netdna.webdesignerdepot.com/uploads/2011/02/inception.jpg">
  </div>

  <div class="item">
    <img src="https://bo3li.files.wordpress.com/2011/05/drive-angry-movie-cover.jpg">
  </div>

  <div class="item">
    <img src="http://www.tolkienlibrary.com/press/images/movie-tie-in-The-hobbit.jpg">
  </div>

</div>

CSS

body {
  background: #212121;
}

.list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.item {
  transform: scale(0);
  width: 150px;
  height: 210px;
  margin: 1%;
  box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.7);
  background: #191919;
  cursor: pointer;
  border-radius: 2px;
  animation: 0.2s loadInItems ease forwards;
}

.item img {
  opacity: 0;
  height: 100%;
  width: 100%;
  border-radius: 2px;
}

@keyframes loadInItems {
  from {
    opacity: 0;
    transform: scale(0);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes fadeIn {
  to {
    opacity: 1
  }
}

JavaScript

var items = document.querySelectorAll(".item"),
  t = 0;

items.forEach(function(i) {
  i.style.animationDelay = t + "s";
  t = t + 0.05;
});

var imgs = [];

items.forEach(function(itm) {
  imgs.push(itm.children[0]);
});


for (var i = 0; i < imgs.length; i++) {
  imgs[i].onload = () => {
    imgs[i].style.opacity = "1";
  };
}