Reverse sense of a text revealing animation

Question

I'm trying to play with css3 and its animation and keyframe system but i'm running out of idea's to get this to work..

I rely on this animation that I found on codepen, and I would like to reverse the text revealing ('Escape' move to right and 'into amazing experiences' is revealing right to left)

Here is the CSS:

body {
    text-align:center;
    background:linear-gradient(141deg, #ccc 25%, #eee 40%, #ddd 55%);
    color:#555;
    font-family:'Roboto';
    font-weight:300;
    font-size:32px;
    padding-top:40vh;
    height:100vh;
    overflow:hidden;
    -webkit-backface-visibility: hidden;
    -webkit-perspective: 1000;
    -webkit-transform: translate3d(0,0,0);
}

div {
  display:inline-block;
  overflow:hidden;
  white-space:nowrap;
}

div:first-of-type {    
  animation: showup 7s infinite;
}

div:last-of-type {
  width:0px;
  animation: reveal 7s infinite;
}

div:last-of-type span {
  margin-left:-355px;
  animation: slidein 7s infinite;
}

@keyframes showup {
    0% {opacity:0;}
    20% {opacity:1;}
    80% {opacity:1;}
    100% {opacity:0;}
}

@keyframes slidein {
    0% { margin-left:-800px; }
    20% { margin-left:-800px; }
    35% { margin-left:0px; }
    100% { margin-left:0px; }
}

@keyframes reveal {
    0% {opacity:0;width:0px;}
    20% {opacity:1;width:0px;}
    30% {width:355px;}
    80% {opacity:1;}
    100% {opacity:0;width:355px;}
}

I tried a lot of things such as adding float, margin, display or edit the keyframes but nothing did the job. The only remarkable change in this animation is the width div so I don't know how to make it work in a reverse situation.

Hoping someone could help me!

Answer 1

This could be help

body {
  text-align: center;
  background: linear-gradient(141deg, #ccc 25%, #eee 40%, #ddd 55%);
  color:#555;
  font-weight: 300;
  font-size: 32px;
  padding-top: 40vh;
  height: 100vh;
  overflow: hidden;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-perspective: 1000;
  perspective: 1000;
  -webkit-transform: translate3d(0,0,0);
  transform: translate3d(0,0,0);
}

div {
  display: inline-block;
  overflow: hidden;
  white-space: nowrap;
  font-size: 30px;
  line-height: 1.5;
}


div.lr {
  width: 0px;
  animation: reveal 7s infinite;
}

div.rl {    
    animation: showup 7s infinite;
}

div.rl span {
  margin-left: -355px;
  animation: slidein 7s infinite;
}

@keyframes showup {
    0% {opacity:0;}
    20% {opacity:1;}
    80% {opacity:1;}
    100% {opacity:0;}
}

@keyframes slidein {
    0% { margin-left:-800px; }
    20% { margin-left:-800px; }
    35% { margin-left:0px; }
    100% { margin-left:0px; }
}

@keyframes reveal {
    0% {opacity:0;width:0px;}
    20% {opacity:1;width:0px;}
    30% {width: 375px;}
    80% {opacity:1;}
    100% {opacity:0;width: 375px;}
}

<div class="lr"> 
  <span>into amazing experiences</span>
</div>
<div class="rl">Escape</div>