<base href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/123941/">
<div class="shuffle expose">
    <img src="bridgefog.jpg" alt>
    <img src="daisyface.jpg" alt>
    <img src="drowninghand.jpg" alt>
    <img src="firefigure.jpg" alt>
    <img src="shellhand.jpg" alt>
    <img src="waterfeet.jpg" alt>
</div>

@keyframes reveal {
  to {
    opacity: 1;
  }
}

body {
  margin: 0;
  background: #000;
  overflow-x: hidden;
}

.shuffle {
  min-height: 100vh;
  position: relative;
}

.shuffle img {
  width: 33%;
  opacity: 0;
}

.expose img {
  animation: reveal 1s forwards;
}

.expose img:nth-child(1) {
  animation-delay: 1s;
}

.expose img:nth-child(2) {
  animation-delay: 2s;
}

.expose img:nth-child(3) {
  animation-delay: 3s;
}

.expose img:nth-child(4) {
  animation-delay: 4s;
}

.expose img:nth-child(5) {
  animation-delay: 5s;
}

.expose img:nth-child(6) {
  animation-delay: 6s;
}
div.webanim img {
  border: 1.4vw solid #eee;
}

function getRandom(min, max) {
  return Math.random() * (max - min) + min;
}

var imgContainer = document.querySelector(".expose"),
imgSeq = document.querySelectorAll(".shuffle img"),
i = 1;

imgContainer.classList.remove("expose");
imgContainer.classList.add("webanim");

function racknstack() {
  Array.prototype.forEach.call(imgSeq, function(photo) { 
	    setTimeout(function(){ 
	    	photo.style.position = "absolute";
			photo.style.width = getRandom(33,45)+"%";
			photo.style.left = getRandom(-5,65)+"%";
			photo.style.top = getRandom(-6,60)+"vh";
			var animate = photo.animate([
	    		{ opacity: '0', transform: 'rotate('+getRandom(-12,12)+'deg) scale(1.2)', boxShadow: '0 0 12px 12px rgba(0,0,0,.3)' },
	    		{ opacity: '1', transform: 'rotate('+getRandom(-8,8)+'deg)', boxShadow: '0 0 6px 6px rgba(0,0,0,.3)' }
	  		], {
	    duration: 2000,
	    fill: 'forwards'
	  });                    
	}, 1800*i)
	i++;
  })
 }
 
imagesLoaded(imgSeq, racknstack);