title: Moving Title Animation On Banner
body: <p>I have an animation on the content of my hero image that start from a 3/4th frame. However when titles repeat it again starts from 3/4th frame.</p>
  <p>I want that from the second time by the time the last letter is leaving the frame the first letters of the &quot;next&quot; sentence have already started on the other end.
  Can you help me with this?</p>
  <p>Here is the website link: <a href="http://54.91.174.201/" rel="nofollow noreferrer">http://54.91.174.201/</a></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>@keyframes home_hero1 {
    0% {
      margin-left: 30%;
    }
    100% {
      margin-left: -4400px;
    }
  }
  
  @keyframes home_hero2 {
    0% {
      margin-right: 30%;
    }
    100% {
      margin-right: -4400px;
    }
  }
  
  .heading_h1 {
    font-size: 150px;
    letter-spacing: 12.5px;
    position: absolute;
    bottom: 50px;
    left: 0;
    line-height: 2;
    white-space: nowrap;
    -moz-animation: home_hero1 21s linear 0s infinite;
    -webkit-animation: home_hero1 21s linear 0s infinite;
  }
  
  .heading_h2 {
    font-size: 150px;
    letter-spacing: 12.5px;
    position: absolute;
    top: 50px;
    right: 0;
    line-height: 1.5;
    white-space: nowrap;
    -moz-animation: home_hero2 23s linear 0s infinite;
    -webkit-animation: home_hero2 23s linear 0s infinite;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="inner-hero-left"&gt;
    &lt;h2 class="heading_h1"&gt;
      &lt;span class="underline--magical"&gt;98% PLANT &amp; NATURALLY DERIVED INGREDIENTS*&lt;/span&gt;
    &lt;/h2&gt;
    &lt;h2 class="heading_h2"&gt;&lt;span class="underline--magical show-on-scroll"&gt;98% PLANT &amp; NATURALLY DERIVED INGREDIENTS*&lt;/span&gt;
    &lt;/h2&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>