<div class="mainContent">

  <div class="box">
    <h2>Title 1</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec aliquam elit id tincidunt aliquet. Integer tincidunt sem ante, sed finibus erat efficitur maximus. Donec ultricies urna non felis rutrum, a suscipit lorem auctor.</p>
  </div>
  <div class="box">
    <h2>Title 2</h2>
    <div class="box-banner"></div>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
  </div>
  <div class="box">
    <h2>Title 3</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec aliquam elit id tincidunt aliquet. Integer tincidunt sem ante, sed finibus erat efficitur maximus. Donec ultricies urna non felis rutrum, a suscipit lorem auctor.</p>
  </div>
  <div class="box">
    <h2>Title 4</h2>
    <div class="box-banner"></div>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
  </div>
  <div class="box">
    <h2>Title 5</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec aliquam elit id tincidunt aliquet. Integer tincidunt sem ante, sed finibus erat efficitur maximus. Donec ultricies urna non felis rutrum, a suscipit lorem auctor.</p>
  </div>
  <div class="box no-text">
    <h2>Title 6</h2>
    <div class="box-banner"></div>
  </div>
</div>
<div class="toolbar">
  <a class="btn left" href="https://twitter.com/MonirAbuHilal">@MonirAbuHilal</a>
  <a class="btn right" href="javascript:replay();">Replay</a>
</div>
@import 'https://fonts.googleapis.com/css?family=Open+Sans:400,700';

@page-background-main-color: #e74c3c;

@bannerImageBaseUrl: "https://unsplash.it/300/300/?random&"; // "http://lorempixel.com/300/300/nature/?";

@baseAnimationDelay: 0s;
@numberOfBoxes: 6;
@animationSpeed: 1.2s;
@animationDelayFactor: @animationSpeed / (@numberOfBoxes * 1.5);
@shadowBlurRadius: 50px;

html{
  width: 100%;
  height: 100%;
  margin: 0;
  background: @page-background-main-color;
}

body{
  font-family: 'Open Sans', arial;
  font-size: 0.8em;
  padding: 20px 0px;
}

.mainContent{
  perspective: 80em;
  width: 960px;
  margin: 0 auto;
}

.box{
  float:left;
  position: relative;

  width: 300px;
  height: 180px;
  background: #FFFFFF;
  box-sizing: border-box;
  padding: 15px;
  margin: 10px;
  box-shadow: 0px 0px @shadowBlurRadius fade(@page-background-main-color, 35%);
  
  opacity: 0;

  .generateAnimationDelays(@numberOfBoxes);

  h2{
    margin: 0;
    margin-bottom: 10px;
  }
  p{
    margin: 0;
  }

  .box-banner{
    background: #CCCCCC;
    height: 80px;
    margin: 0px -15px;
    margin-bottom: 6px;
    background-position: center center;
  }
  &.no-text .box-banner{
      height:129px;
  }

  .loaded &{
    opacity:1;
    animation: animateBoxesFromTopToBottom @animationSpeed backwards;
  }
}

.generateAnimationDelays(@counter) when (@counter > 0) {
  .generateAnimationDelays((@counter - 1)); // next iteration
  
  // code for each iteration
  &:nth-child(@{counter}){
    animation-delay:( (@counter - 1) * (@animationDelayFactor * @animationSpeed) ) + @baseAnimationDelay !important;
    z-index: @numberOfBoxes - (@counter - 1);
    
    .box-banner{
      background-image: url("@{bannerImageBaseUrl}@{counter}");
    }
  }
}

@keyframes animateBoxesFromTopToBottom{
  0%{
    transform: rotateX(90deg) translateY(-150%);
    opacity: 0;
  }
  100%{
    transform: rotateX(0deg) translateY(0%);
    opacity: 1;
  }
}
.toolbar{
  position: absolute;
  display:block;
  z-index:999;
  
  top: 0px;
  right: 0px;
  width:100%;
  
  transform:scale(0);
  
  .loaded &{
    
    transform:none;
    animation: showReplayButton @animationSpeed backwards;
    animation-delay: (@numberOfBoxes * @animationDelayFactor * @animationSpeed) + @baseAnimationDelay + 2s;
        transform: translateZ(1px);
  }
  
}
.btn{
  font-size:1.5em;
  font-weight: 700;
  text-decoration:none;
  background: rgba(0,0,0,0.4);
  padding: 0px 10px 4px 10px;
  color: lighten(@page-background-main-color, 10%);
  display:block;
  &.left{
    float:left;
    font-weight:400;
  }
  &.right{
    float:right;
  }
}

@keyframes showReplayButton{
  0%{
    opacity: 0;
    transform: translateY(-30%);
  }
  100%{
    opacity: 1;
  }
}
View Compiled
// Wait for all images to load to fix the iOS animation behavior
window.addEventListener("load", function(){
  document.body.classList.add('loaded');
});

function replay(){
  document.body.classList.remove('loaded');
  setTimeout(function(){
    document.body.classList.add('loaded');
  }, 100);
}
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.