JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://code.jquery.com/jquery-2.2.0.min.js"></script>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
CSS
.box {
width: 200px;
height: 200px;
margin: 10px;
background-color: blue;
float: left;
opacity: 0;
}
JavaScript
$(document).ready(function() {
jQuery.extend(jQuery.easing, {
easeOut: function(x, t, b, c, d) {
return (t == d) ? b + c : c * (-Math.pow(2, -10 * t / d) + 1) + b;
}
});
$(".box").each(function(i) {
$(this).delay(i * 150).animate({
'opacity': '1'
}, 2000, 'easeOut');
});
});