JSFiddle - React, Tailwind, and code Playground

HTML

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

SCSS

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