JSFiddle - React, Tailwind, and code Playground

HTML

<div id="space"></div>
<div id="container">


  <img src="https://cdn1.iconfinder.com/data/icons/user-pictures/100/male3-64.png" />

  <img src="https://cdn1.iconfinder.com/data/icons/user-pictures/100/male3-64.png" />

  <img src="https://cdn1.iconfinder.com/data/icons/user-pictures/100/male3-64.png" />


  <img src="https://cdn1.iconfinder.com/data/icons/user-pictures/100/male3-64.png" />

  <img src="https://cdn1.iconfinder.com/data/icons/user-pictures/100/male3-64.png" /></div>

CSS

#space {
  height: 700px;
  background-color: blue;
}

#container img {
  opacity: 0;
}

@keyframes animation {
  100% {
    opacity: 1;
  }
}

#container.animate img {
  animation: animation .5s forwards;
}

#container img:nth-child(1) {
  animation-delay: .5s;
}

#container img:nth-child(2) {
  animation-delay: 1s;
}

#container img:nth-child(3) {
  animation-delay: 1.5s;
}

#container img:nth-child(4) {
  animation-delay: 2s;
}

#container img:nth-child(5) {
  animation-delay: 2.5s;
}

JavaScript

$(window).on('scroll', function (e) {
   var top = $(window).scrollTop() + $(window).height(),
       isVisible = top > $('#container img').offset().top;
       
   $('#container').toggleClass('animate', isVisible);
});