JSFiddle - React, Tailwind, and code Playground

HTML

<div id="wrap">
    <div class="hiding">bye!</div>
    <div class="showing">hi!</div>
</div>

CSS

#wrap {
    position: relative;
}

.hiding, .showing {
    width: 100px;
    left: 0;
    top: 0;
    position: absolute;
    color: white;
}
.showing {
    background: green;
    cursor: pointer;
}
.hiding {
    -webkit-animation: slide-one-pager 2s;
    -webkit-animation-fill-mode: forwards;
    background: red;
    z-index: 2;
}

@-webkit-keyframes slide-one-pager {
    0%   { left: 0; }
    49%  { left: 0; }
    50%  { left: -100px; }
    100% { left: -100px; }
}