JSFiddle - React, Tailwind, and code Playground

by Kelly Hawker

HTML

<div class="con">
<div class="fromR">I come from the right side</div>
<div class="fromL">I come from the left side</div>
</div>

CSS

.con { height:200px; background:#eee; }

.fromR, .fromL { 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; }

.con:hover .fromR {
  animation: right_to_left 3s ease;
  opacity: 1.0;
}

.con:hover .fromL {
  text-align: right;
  animation: left_to_right 3s ease;
  opacity: 1.0; 
}

@keyframes right_to_left {
  from {
    margin-left: 100%;
  }
  to {
    margin-left: 0;
  }
}

@keyframes left_to_right {
  from {
    margin-left: -100%;
  }
  to {
    margin-left: 0;
  }
}