JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrap">
  <div class="text">
    <span>Text</span>
  </div>
</div>

CSS

.wrap{
  overflow: hidden;
}
.text{
  visibility: hidden;
}
.animated{
  animation-fill-mode: both;
  visibility: visible
}
.animated.showText{
  animation: .6s showText forwards ease-in-out;
}

@keyframes showText {
  from {
    transform: translateY(30%);
    opacity: 0;
  }
  to{
    transform: translateX(0);
    opacity: 1;
  }
}

JavaScript

let globalTimeout = 500;

$(document).ready(function() {
	const $text = $('.text');
  
	setTimeout(function() {
		animate($text, 'showText')
	}, globalTimeout);
});

let animate = ($elem, animationName) => {
  $elem.addClass('animated').addClass(animationName);
  
  $elem.on('animationend', () => {
    $elem.removeClass(animationName);
  });
}