JSFiddle - React, Tailwind, and code Playground

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%, 50% {
        -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 = '0';
        obj2.style.WebkitAnimationDuration = '2s';
        obj2.style.WebkitAnimationIterationCount = '1';
        obj2.style.WebkitAnimationTimingFunction = 'ease';
        obj2.style.WebkitAnimationFillMode = 'forwards';

    }, false);
}