JSFiddle - React, Tailwind, and code Playground

by George Berkeley

HTML

<div class="contenedor">
    <div id="caja1" class="show">
      Caja 1
    </div>
    <div id="caja2" class="hide">
      Caja 2
    </div>
  </div>

CSS

@-webkit-keyframes ida
{
  0%   {-webkit-transform:translate(0%,0%);}
  100% {-webkit-transform:translate(0%,100%);}	
}

@-webkit-keyframes vuelta
{
  0%   {-webkit-transform:translate(0%,100%);}
  100% {-webkit-transform:translate(0%,0%);}	
}



.contenedor {
	position:absolute;
	top:0;
	left:0;
	width:50%;
	height:5%;
}

.show, .hide {
	position:absolute;
	top:0;
	left:0;
	width:50%;
	height:100%;
	color:white;
	text-align:center;
	-webkit-transform:translate(0%,0%);
	opacity:1; 
}
.show {background-color:rgba(0,0,255,.5); z-index:1000;}
.hide {background-color:blue; text-align:left; z-index:0;}

JavaScript

window.onload = function x()
	{
        var obj1 = document.getElementById("caja1");
		var obj2 = document.getElementById("caja2");
		
		obj1.addEventListener("mouseover",function()
		{
			obj2.style.WebkitAnimationName = 'ida';
			obj2.style.WebkitAnimationDelay = '0s';
			obj2.style.WebkitAnimationDuration = '1s';
			obj2.style.WebkitAnimationIterationCount = '1';
			obj2.style.WebkitAnimationTimingFunction = 'ease';
			obj2.style.WebkitAnimationFillMode = 'forwards';

		},false);
		
		obj1.addEventListener("mouseout",function()
		{
			obj2.style.WebkitAnimationName = 'vuelta';
			obj2.style.WebkitAnimationDelay = '1s';
			obj2.style.WebkitAnimationDuration = '1s';
			obj2.style.WebkitAnimationIterationCount = '1';
			obj2.style.WebkitAnimationTimingFunction = 'ease';
			obj2.style.WebkitAnimationFillMode = 'forwards';

		},false);
	}