JSFiddle - React, Tailwind, and code Playground

by marcosrego

HTML

<div id="container">
<div id="content"></div>
</div>

CSS

#container{
		position:relative;
		width:100px;
		height:100px;
		border-style:inset;
    animation: animShow 1s forwards;    
}

#content{
			opacity: 0;
			-webkit-animation:animDown 1s ease;
			position:absolute;
			top:100px;
			width:100%;
			height:100%;
			background-color:lightgreen;
}
  
@keyframes animShow {
    0% {
      opacity: 0;
    }
    99% {
      opacity: 0;
    }
    100% {
      opacity: 1;
    }
}
  
#container:hover #content{
			-webkit-animation:animUp 1s ease;
			-webkit-animation-fill-mode:forwards;
      animation-fill-mode:forwards;
}

@-webkit-keyframes animUp{
	0% {
		-webkit-transform:translateY(0);
    transform:translateY(0);
		opacity:0;}
	100% {
    -webkit-transform:translateY(-100%);
    transform:translateY(-100%);
		visibility:visible;
		opacity:1;}
}
@-webkit-keyframes animDown{
	0% {
		-webkit-transform:translateY(-100%);
    transform:translateY(-100%);
		opacity:1;}
	100% {
		-webkit-transform:translateY(0);
    transform:translateY(0);
		opacity:0;}
}