JSFiddle - React, Tailwind, and code Playground

HTML

<div id="target"></div>

CSS

.foo {
  float: left;
  margin: 1em;
  opacity: 0;
  transition: opacity .7s ease;
}
#target {
  width: 400px;
}

JavaScript

let images = [
  'https://placeimg.com/150/100/animals',
  'https://placeimg.com/150/100/arch',
  'https://placeimg.com/150/100/nature',
  'https://placeimg.com/150/100/people',
]

let targetBlock = document.querySelector('#target')
images.forEach(function(src, i) {
  let timeout = 700 * i // ms
  setTimeout(function(){
    let img = new Image()
    img.src = src
    img.className = 'foo'
    targetBlock.appendChild(img)
    img.offsetTop; // reflow hack
    img.style.opacity = 1
  }, timeout)
})