JSFiddle - React, Tailwind, and code Playground

HTML

<section class="seccion">
			<ul class="lista">
				<li class="square square_1"></li>
				<li class="square square_2"></li>
				<li class="square square_3"></li>
				<li class="square square_4"></li>
				<li class="square square_5"></li>
				<li class="square square_6"></li>
				<li class="square square_7"></li>
				<li class="square square_8"></li>
				<li class="square square_9"></li>
				<li class="square square_10"></li>
				<li class="square square_11"></li>
				<li class="square square_12"></li>
			</ul>
		</section>

CSS

@keyframes bigger{
	0%{
		transform:scale(0,0);
	}
	100%{
		transform:scale(1,1);
	}
}
body,html{
	margin:0 0;
	padding:0 0;
	height:100%;
	background-color:#04102d;
}

.seccion{
	width:60%;
	height:50%;
	position:relative;
	margin:0 auto;
	transform:translate(0px,100px);
}
.lista{
	height:100%;
	position:realtive;
	padding:0 0;
	margin:0 0;
	list-style:none;
}
.square{
	width:15%;
	height:40%;
	background-color:#51ea8d;
	display:inline-block;
	margin: 0 0 10px 10px;
	transform:scale(0,0);
	transition:transform .5s ease-in;
}
.big{
	animation:bigger .7s cubic-bezier(.52,-0.66,.47,1.44) forwards ;
}
.disappear{
opacity:0;
visibility:hidden;
transform:translate(0px,-50px);
}

JavaScript

$(document).ready(function(){
            var core = $(this);
			var total = $('.lista').children().size();
			var cont = 0;
			
			forshow();
			function showthem(i){
				setTimeout(function(){$('.lista').children().eq(i).addClass('big');},100+i*150);
			};//END FUNCTION SHOWTHEM()--------------------->
				
			function forshow(){
				for(var i=0;i<total;i++){
					showthem(i);
				};//END FOR FUNCTION FORSHOW()-------------->
			};//END FUNCTION FORSHOW()---------------------->
});