JSFiddle - React, Tailwind, and code Playground

by Kelly Hawker

HTML

<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<div class="slide-con">
  <div class="slide-left">Text that will slide in from the LEFT</div>
  <div class="slide-right">Text that will slide in from the RIGHT</div>
</div>

CSS

.slide-con {
  width: 100%;
  overflow: hidden;
  height:200px;
  max-width: 100%;
  background:#eee;
}

/**************************************
RIGHT
**************************************/

.slide-con .slide-right {
  animation: 0.5s slide-right 0.5s reverse;
  opacity: 0; 
  transition: opacity 1.5s ease-in-out; 
  -moz-transition: opacity 1.5s ease-in-out; 
  -webkit-transition: opacity 1.5s ease-in-out;
}
.slide-con:hover .slide-right {
  animation: 0.5s slide-right 0.5s reverse;
  transform:translateX(-100%);
  opacity: 1.0;
}

/**************************************
LEFT
**************************************/

.slide-con .slide-left { 
animation: 0.5s slide-right 0.5s forwards; 
opacity: 0; 
transition: opacity 1.5s ease-in-out; 
-moz-transition: opacity 1.5s ease-in-out; 
-webkit-transition: opacity 1.5s ease-in-out; }

.slide-con:hover .slide-left {
  animation: 0.5s slide-left 0.5s forwards;
  transform:translateX(-100%);
  opacity: 1.0;
}

/**************************************
FRAMES
**************************************/

@-webkit-keyframes slide-left {
    from { transform:translateX(-100%); }
    to { transform:translateX(0);}
}

@-webkit-keyframes slide-right {
    from { transform:translateX(0); }
    to { transform:translateX(-100%); }
}