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;}
}