unfold four divs to give effect that they are opening, one after another

You will see on this page when the page loads the four divs fold out giving a really cool effect.

I have no idea how to do this. I have seen that jQuery UI offers a fold-effect - see here, however this isn't really what I am looking for.

I have also looked at many answers on here but cannot find any to answer my specific question.

Can anyone provide any guidance on how to do this.

My current code is below, along with a jsfiddle.

html

<div class="wrap">
  <div class="bg"></div>
  <div class="main-container artists">

    <div class="employee-box">
    </div>
    <div class="flip-container" ontouchstart="this.classList.toggle('hover');">
      <div class="flipper">
        <div class="front employee-1">
          <!-- front content -->
        </div>
        <div class="back">
          <!-- back content -->
        </div>
      </div>
    </div>

    <div class="flip-container" ontouchstart="this.classList.toggle('hover');">
      <div class="flipper">
        <div class="front employee-2">
          <!-- front content -->
        </div>
        <div class="back">
          <!-- front content -->
        </div>
      </div>
    </div>

    <div class="flip-container" ontouchstart="this.classList.toggle('hover');">
      <div class="flipper">
        <div class="front employee-3">
          <!-- front content -->
        </div>
        <div class="back">
          <!-- back content -->
        </div>
      </div>
    </div>
  </div>

css

body{
  height: 2000px;
}
.wrap {
  height: 100%;
  position: relative;
  overflow: hidden;
}

.bg {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  background: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/167792/mountains_copy.jpg') no-repeat center center;
  background-size: cover;
  transform: scale(1.1);
}

.employee-box {
  background-color: red;
  height: 250px;
  width: 250px;
  float:left;
}

.employee-1 {
  background: yellow;
}

.employee-2 {
  background: pink;
}

.employee-3 {
  background: green;
}

/* entire container, keeps perspective */
.flip-container {
  perspective: 1000px;
  display: inline-block;
}

.container-border{
  border: 1px solid #ccc; 
}
/* flip the pane when hovered */
.flip-container:hover .flipper, .flip-container.hover .flipper {
  transform: rotateY(180deg);
}
.flip-container, .front, .back {
  width: 250px;
  height: 250px;
}

/* flip speed goes here */
.flipper {
  transition: 0.8s;
  transform-style: preserve-3d;
  position: relative;
}

/* hide back of pane during swap */
.front, .back {
  backface-visibility: hidden;
  position: absolute;
  top: 0;
  left: 0;
}

/* front pane, placed above back */
.front {
  z-index: 2;
  /* for firefox 31 */
  transform: rotateY(0deg);
}

/* back, initially hidden pane */
.back {
  transform: rotateY(180deg);
  background-color: #fff;
}