JSFiddle - React, Tailwind, and code Playground

by Cal Francesco

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{
    visibility:visible;
    display:block;
    -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 {
	from  {  opacity: 1; }
	to {  opacity: 0; }

}
@-webkit-keyframes showEffect {
	from  {  opacity: 1; }
	to {  opacity: 0; }
}
@keyframes showEffect {
	from  {  opacity: 1; }
	to {  opacity: 0; }
}

JavaScript

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