JSFiddle - React, Tailwind, and code Playground

HTML

<div class="background"><img src="http://saveimg.ru/pictures/31-01-16/670b081f020b438eeb07c6cd0ed9e00e.jpg"></div>
<img src="http://saveimg.ru/pictures/31-01-16/547d49a3108950989858daa86c0533a9.png" border="0" style="position: absolute; left: 20px; top: 20px;">
<img src="http://saveimg.ru/pictures/31-01-16/547d49a3108950989858daa86c0533a9.png" border="0" style="position: absolute; right: 20px; bottom: 20px;">

CSS

html,body{margin:0;padding:0;}
#body.fade{opacity: 0;}
#body.appear{opacity: 1;transition: opacity 5s;}

html,body{height:100%;}
.background{position:absolute;z-index:0;width:100%;height:100%;overflow:hidden;}
.background img{width:100%;}

img{opacity:0;}

JavaScript

$(document).ready(function(){
	var imgs = $('img');
	showIMG(0);

  function showIMG(id){
  	if(imgs[id]){
      var src = $(imgs[id]).attr('src');
      $(imgs[id]).attr({'src':''});
      $(imgs[id]).attr({'src':src}).load(function(){
        $(imgs[id]).animate({'opacity':'1'},400);
          setTimeout(function(){showIMG(++id)},400);
      });
  	}
  }
});