JSFiddle - React, Tailwind, and code Playground

HTML

<h2>Blind in</h2>
<h3>Blind in, from top</h3>
<div class="blind-content in origin-top">
    <p>Hello, i'am content.</p>
</div>

<h3>Blind in, from middle</h3>
<div class="blind-content in origin-middle">
    <p>Hello, i'am content.</p>
</div>

<h2>Blind in, from bottom</h2>
<div class="blind-content in origin-bottom">
    <p>Hello, i'am content.</p>
    <p>Hello, i'am content.</p>
    <p>Hello, i'am content.</p>
</div>

<h2>Blind out</h2>
<h3>Blind out, from top</h3>
<div class="blind-content out origin-top">
    <p>Hello, i'am content.</p>
</div>

<h3>Blind out, from middle</h3>
<div class="blind-content out origin-middle">
    <p>Hello, i'am content.</p>
</div>

<h3>Blind out, from bottom</h3>
<div class="blind-content out  origin-bottom">
   <p>Hello, i'am content.</p>
    <p>Hello, i'am content.</p>
    <p>Hello, i'am content.</p>
</div>

CSS

.blind-content
{
   background-color: silver; 
}
.blind-content.origin-top
{
  transform-origin: top;  
}
.blind-content.origin-middle
{
  transform-origin: middle;  
}
.blind-content.origin-bottom
{
  transform-origin: bottom;  
}

.blind-content.in
{
     -webkit-animation: blind-in 1s infinite;
    animation: blind-in 1s infinite;
}

.blind-content.out
{
    -webkit-animation: blind-out 1s infinite;
    animation: blind-out 1s infinite;
}

@-webkit-keyframes blind-in {
      0% { transform: scaleY(0); }
    100% { transform: scaleY(1); }
}

@-webkit-keyframes blind-out {
    0% { transform: scaleY(1); }
    100% { transform: scaleY(0); }
}


@keyframes blind-in {
      0% { transform: scaleY(0); }
    100% { transform: scaleY(1); }
}

@keyframes blind-out {
    0% { transform: scaleY(1); }
    100% { transform: scaleY(0); }
}