<div class="container">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>  
  <div></div>  
  <div></div>
  <div></div>
</div><!--container-->
$n: 8;
$easeOutSine: cubic-bezier(.39,.57,.56, 1);
$easeInSine: cubic-bezier(.73,.26,.92,.65);

@mixin colors($max-count, $color-frequency){
  $color: 360/$max-count;
  
  @for $i from 1 through $max-count {
    &:nth-child(#{$max-count}n + #{$i}) {
      background: hsl(90%, ($i - 1)*($color / $color-frequency), 40%);
    }
  }
}

body {
  background: #333;
}

.container {
  width: 400px;
  height: 250px;
  margin: 25px auto;
  div {
    position: relative;
    width: 12.5%;
    height: 100%;
    background: hsla(255, 255, 255, 0.3);
    @include colors(50,1);
    float: left;
    perspective: 600px;
    transform-style: preserve-3d;
    backface-visibility: hidden;
    transform: translate3d(0);
    
    @for $i from 1 through $n {
      &:nth-child(#{$i}) {
        animation: loadIn 1.35s #{$i*0.1}s $easeOutSine forwards;
      }
    }
    
  }
}

@keyframes loadIn {
  100% {
    transform: rotateY(180deg) translateZ(10px) rotateX(180deg);
  }
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.