JSFiddle - React, Tailwind, and code Playground

HTML

<div class="block"></div>
<div class="block2"></div>

SCSS

@keyframes showBlock{
  0%{
    display: none;
    visibility: hidden;
    opacity: 0;
  }
  1%{
    display: block;
    height: 2px;
  }
  100%{
    visibility: visible;
    opacity: 1;
  }
}
.block{
  
  width: 45%;
  display: inline-block;
  height: 500px;
  background-color: #000;
  animation: showBlock 2s 3s ease-in-out both;
}
.block2{
  display: inline-block;
  vertical-align: top;
  width: 45%;
  height: 250px;
  background-color: #000;
  animation: showBlock 2s 3s ease-in-out both;
}