HTML
<div class="wrapper">
<div class="container">
<div class="image"></div>
</div>
<div class="container">
<div class="image"></div>
</div>
<div class="container">
<div class="image"></div>
</div>
<div class="container">
<div class="image"></div>
</div>
<div class="container">
<div class="image"></div>
</div>
<div class="container">
<div class="image"></div>
</div>
<div class="container">
<div class="image"></div>
</div>
<div class="container">
<div class="image"></div>
</div>
<div class="container">
<div class="image"></div>
</div>
<div class="container">
<div class="image"></div>
</div>
<div class="container">
<div class="image"></div>
</div>
<div class="container">
<div class="image"></div>
</div>
<div class="container">
<div class="image"></div>
</div>
<div class="container">
<div class="image"></div>
</div>
<div class="container">
<div class="image"></div>
</div>
<div class="container">
<div class="image"></div>
</div>
<div class="container">
<div class="image"></div>
</div>
<div class="container">
<div class="image"></div>
</div>
<div class="container">
<div class="image"></div>
</div>
<div class="container">
<div class="image"></div>
</div>
</div>
SCSS
.wrapper {
display: flex;
flex-flow: row wrap;
overflow: hidden;
perspective: 800px;
}
.container {
width: 20%;
}
.image {
width: 100%;
padding-top: 100%;
background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/242518/trump.png);
background-size: cover;
transform: scale(4, 4) translate(1000%, 100%) rotate3d(8, -4, 8, 90deg);
opacity: 0;
transition: 0.25s ease opacity;
}
.image.-animate {
opacity: 1;
transform: scale(1, 1) translate(0, 0) rotate3d(0, 0, 0, 90deg);
animation: 0.95s ease gallery;
transition: 0.5s ease opacity;
}
@keyframes gallery {
0% {
transform: scale(4, 4) translate(1000%, 100%) rotate3d(8, -4, 8, 90deg);
}
100% {
transform: scale(1, 1) translate(0, 0) rotate3d(0, 0, 0, 90deg);
}
}
JAVASCRIPT
$('.image').each(function(index, value) {
setTimeout(function() {
$(value).addClass('-animate');
}, 125 * index);
});
1 Response