JSFiddle - React, Tailwind, and code Playground

by namnium1125

HTML

<div id="wrap">

  <div id="first">
    <img src="http://placehold.jp/aa0000/550000/150x150.png">
  </div>

  <div id="late">
    <img src="http://placehold.jp/00aa00/005500/150x150.png">
  </div>

  <div id="second">
    <img src="http://placehold.jp/aa0000/550000/150x150.png">
  </div>

</div>

CSS

#wrap {
  display: box;
  display: -ms-box;
  display: -moz-box;
  display: -webkit-box;
}

#late {
  opacity: 0;
  animation: appeare 1s ease 2s 1 normal forwards running;
}

@keyframes appeare {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}