JSFiddle - React, Tailwind, and code Playground

HTML

<div class="magic-images">
  <img src="https://placeimg.com/150/100/animals" alt="">
  <img src="https://placeimg.com/150/100/arch" alt="">
  <img src="https://placeimg.com/150/100/nature" alt="">
  <img src="https://placeimg.com/150/100/people" alt="">
</div>

CSS

.magic-images {
  width: 400px;
}
.magic-images img {
  float: left;
  margin: 1em;
  opacity: 0;
  transition: opacity .7s ease;
}
.magic-images img.visible  {
  opacity: 1;
}

JavaScript

let images = [...document.querySelectorAll('.magic-images img')]
images.forEach(function(img, i) {
  let timeout = 700 * i // ms
  setTimeout(function(){
    img.classList.add('visible')
  }, timeout)
})