<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
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.