title: Fade in from left to right all words of sentence using CSS
body: <p>I want to achieve the final CSS only animation effect like in figure B.
  <a href="https://i.stack.imgur.com/zs8Sm.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/zs8Sm.png" alt="enter image description here"></a></p>
  
  <p>Here is my code:
  <a href="http://codepen.io/catch_up/pen/bpqexg?editors=1100" rel="nofollow noreferrer">http://codepen.io/catch_up/pen/bpqexg?editors=1100</a></p>
  
  <p>HTML</p>
  
  <pre><code>    &lt;div class='programming my-anim-parent'&gt;
        &lt;span class='my-anim'&gt;Hello!&lt;/span&gt;
        &lt;span class='my-anim'&gt;How&lt;/span&gt;&lt;/span&gt;
        &lt;span class='my-anim'&gt;Are&lt;/span&gt;&lt;/span&gt;
        &lt;span class='my-anim'&gt;You &lt;/span&gt;&lt;/span&gt;
    &lt;span class='my-anim'&gt;People.&lt;/span&gt;
        &lt;span class='my-anim'&gt;I&lt;/span&gt;
    &lt;span class='my-anim'&gt;Learn&lt;/span&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>.programming {
    font-size: 48px;
      position: absolute;
    top: 50%;
      left: 50%;
      -ms-transform: translateX(-50%) translateY(-50%);
      -webkit-transform: translate(-50%, -50%);
      transform: translate(-50%, -50%);
    white-space: nowrap;
  }
  
  .programming span:nth-of-type(1) {
      animation-delay: 0.3s;
  }
  .programming span:nth-of-type(2) {
      animation-delay: 0.6s;
  }
  .programming span:nth-of-type(3) {
      animation-delay: 0.9s;
  }
  .programming span:nth-of-type(4) {
      animation-delay: 1.2s;
  }
  .programming span:nth-of-type(5) {
      animation-delay: 1.5s;
  }
  .programming span:nth-of-type(6) {
      animation-delay: 1.8s;
  }
  .programming span:nth-of-type(7) {
      animation-delay: 2.1s;
  }
  
  .my-anim-parent {
      animation: L2RslideBounce 2.9s ease-in-out;
      visibility: visible !important;
  }
  
  .my-anim {
      animation: L2RAppear 2s, fadeIn 0.8s linear backwards;
      visibility: visible !important;
  }
  
  /*FOR BOUNCING SENTENCE */
  @keyframes L2RslideBounce {
    0% {
          transform: translate(-60%,-50%);
      } 
    50%{
      transform: translate(-40%,-50%);
    }
      100% {
          transform: translate(-50%,-50%);
      }
  }
  
  /*I think this is not working properly! Words are fading in all at once not from left to right. Can also be checked by putting long word.*/
  /*EACH WORD SHOULD APPEAR LEFT TO RIGHT*/
  @keyframes L2RAppear {
    0% {
      width: 0%;
      }
      100% {
      width: 100%;
      }
  }
  
  /*FADING IN*/
  @keyframes fadeIn {
      0% {
          opacity: 0.0;
      }
      100% {
          opacity: 1;
      }
  }
  </code></pre>
  
  <p>Which is superimposition of 2 things: </p>
  
  <p><strong>1)</strong> fade in from left to right for each word.</p>
  
  <p><strong>2)</strong> Bounce left to right of entire sentence.</p>
  
  <p>2nd is happening fine but for 1st one, fading is happening for each word all at once and not from left to right!! How to fix this. Code written for it but not working. How to fix this?</p>