JSFiddle - React, Tailwind, and code Playground

CSS

.square {
  background:red;
  height:50px;
  width:50px;
  display:inline-block;
  margin:0;
  padding:0;
  float:left;
  transition: all 1s;
}

.hidden { 
opacity: 0;
}
.show {
  opacity: 1;
  transition: all 1s;
 
}

body {
  margin:0;padding:0;background:green;
}

JavaScript

$(function(){
  for(var i = 0; i < 1000; i++) {
    $('body').append('<div class="square"></div>');
  }
  
  $('.square').addClass('hidden');
  window.setTimeout(function(){
    $('.square').removeClass('hidden').addClass('show');
  }, 1);
  
    window.setTimeout(function(){
    $('.square').removeClass('show');
  }, 501);

});