title: How to animate sliding-in text form left to right
body: <p>I already have a sliding text which slides in from the right side to the left but I do not succeed in it to make this work from the <strong>left</strong> to the right <strong>side</strong>.</p>
  
  <p>So the <code>&lt;h1&gt;</code> is sliding in from the right side and is going to the left. And the <code>&lt;h2&gt;</code> should slide in from the left side and going to the right. The text should stay at the right side of the screen. Play the animation at the same time.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>h1 {
    -moz-animation-duration: 3s;
    -webkit-animation-duration: 3s;
    -moz-animation-name: slidein-left;
    -webkit-animation-name: slidein-left;
  }
  
  @-moz-keyframes slidein-left {
    from {
      margin-left: 100%;
      width: 300%
    }
    to {
      margin-left: 0%;
      width: 100%;
    }
  }
  
  @-webkit-keyframes slidein-left {
    from {
      margin-left: 100%;
      width: 300%
    }
    to {
      margin-left: 0%;
      width: 100%;
    }
  }
  
  h2 {
    -moz-animation-duration: 3s;
    -webkit-animation-duration: 3s;
    -moz-animation-name: slidein-right;
    -webkit-animation-name: slidein-right;
  }
  
  @-moz-keyframes slidein-right {
    from {
      margin-right: 100%;
      width: 300%
    }
    to {
      margin-right: 0%;
      width: 100%;
    }
  }
  
  @-webkit-keyframes slidein-right {
    from {
      margin-right: 100%;
      width: 300%
    }
    to {
      margin-right: 0%;
      width: 100%;
    }
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;h1&gt;I come from the right side&lt;/h1&gt;
  &lt;h2 style="padding-right: 0px;"&gt;I come from the left side&lt;/h2&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>How can i achieve this?<br>
  <a href="https://jsfiddle.net/rs8dco4g/" rel="nofollow noreferrer">JSFiddle</a> </p>