JSFiddle - React, Tailwind, and code Playground

HTML

<h1>1 seconde show/hide effect</h1>
<hr/>
<p class="js_only">JS only</p>
<hr/>
<p class="css_only">CSS only</p>
<hr/>

CSS

.css_only{
    -moz-animation-name: showEffect;
	-moz-animation-iteration-count: 1;
	-moz-animation-timing-function: ease-in;
	-moz-animation-duration: 2.3s;

	-webkit-animation-name: showEffect;
	-webkit-animation-iteration-count: 1;
	-webkit-animation-timing-function: ease-in;
	-webkit-animation-duration: 2.3s;

	animation-name: showEffect;
	animation-iteration-count: 1;
	animation-timing-function: ease-in;
	animation-duration: 2.3s;
}


@-moz-keyframes showEffect {
	0% { display: none; visibility: hidden; }
	100% { display: block; visibility: visible;  }

}
@-webkit-keyframes showEffect {
	0% { display: none; visibility: hidden; }
	100% { display: block; visibility: visible;  }

}
@keyframes showEffect {
	0% { display: none; visibility: hidden; }
	100% { display: block; visibility: visible;  }
}

JavaScript

$(document).ready(function(){
    $(".js_only").hide();
    setTimeout(function () {
        $(".js_only").show();
    }, 1000);
});