<div class="wrapper">
  <div class="container">
    <div class="image image--hidden"></div>
  </div>
  <div class="container">
    <div class="image image--hidden"></div>
  </div>
  <div class="container">
    <div class="image image--hidden"></div>
  </div>
  <div class="container">
    <div class="image image--hidden"></div>
  </div>
  <div class="container">
    <div class="image image--hidden"></div>
  </div>
  <div class="container">
    <div class="image image--hidden"></div>
  </div>
  <div class="container">
    <div class="image image--hidden"></div>
  </div>
  <div class="container">
    <div class="image image--hidden"></div>
  </div>
  <div class="container">
    <div class="image image--hidden"></div>
  </div>
  <div class="container">
    <div class="image image--hidden"></div>
  </div>
  <div class="container">
    <div class="image image--hidden"></div>
  </div>
  <div class="container">
    <div class="image image--hidden"></div>
  </div>
  <div class="container">
    <div class="image image--hidden"></div>
  </div>
  <div class="container">
    <div class="image image--hidden"></div>
  </div>
  <div class="container">
    <div class="image image--hidden"></div>
  </div>
  <div class="container">
    <div class="image image--hidden"></div>
  </div>
  <div class="container">
    <div class="image image--hidden"></div>
  </div>
  <div class="container">
    <div class="image image--hidden"></div>
  </div>
  <div class="container">
    <div class="image image--hidden"></div>
  </div>
  <div class="container">
    <div class="image image--hidden"></div>
  </div>
  <div class="container">
    <div class="image image--hidden"></div>
  </div>
  <div class="container">
    <div class="image image--hidden"></div>
  </div>
  <div class="container">
    <div class="image image--hidden"></div>
  </div>
  <div class="container">
    <div class="image image--hidden"></div>
  </div>
  <div class="container">
    <div class="image image--hidden"></div>
  </div>
</div>
.wrapper {
  display: flex;
  flex-flow: row wrap;
  perspective: 800px;
  overflow: hidden;
}

.container {
  width: 20%;
}

.image {
  position: relative;
  z-index: 1;
  width: 100%;
  padding-top: 100%;
  background-image: url(https://www.fillmurray.com/500/500);
  background-size: cover;
  transform: scale(1, 1) translate(0, 0) rotate3d(0, 0, 0, 90deg);
  opacity: 1;
  cursor: pointer;
}

.image--hidden {
  opacity: 0;
}
//Handles the delay of the animation class on the component
let images = document.querySelectorAll('.image');

images.forEach((image, index) => {
  let flyInRight = [{
    //Gives layering when reseting one image
    zIndex: images.length - index,
    transform: 'scale(2, 2) translate(100vw, 100%) rotate3d(1, 1, 1, 90deg)',
    opacity: 0
  }, {
    zIndex: images.length - index,
    transform: 'scale(1, 1) translate(0, 0) rotate3d(0, 0, 0, 90deg)',
    opacity: 1
  }];
  let flyInLeft = [{
    //Gives layering when reseting one image
    zIndex: images.length - index,
    transform: 'scale(2, 2) translate(-100vw, 100%) rotate3d(1, 1, 1, 90deg)',
    opacity: 0
  }, {
    zIndex: images.length - index,
    transform: 'scale(1, 1) translate(0, 0) rotate3d(0, 0, 0, 90deg)',
    opacity: 1
  }];
  
  let imageFlyIn = image.animate(flyInRight, {
    duration: 500,
    delay: 150 * index,
    easing: 'ease-out'
  });
  
  imageFlyIn.onfinish = () => {
    image.classList.remove('image--hidden');
  };
  
  image.addEventListener('click', event => {
    image.animate(flyInLeft, {
      duration: 500,
      delay: 0,
      easing: 'ease-out'
    });
  });
  
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://s3-us-west-2.amazonaws.com/s.cdpn.io/61811/web-animations-next-2.2.1.min.js