title: CSS3 Animation-fill-mode property
body: <p>I'm creating an effect where text slides into the window and stays there after the animation ends. I've been able to get the animation to work on 1 piece of the text, but for some reason the 2nd piece is not working.</p>
  
  <p>Please see my fiddle <a href="https://jsfiddle.net/9fpryou8/" rel="nofollow">https://jsfiddle.net/9fpryou8/</a></p>
  
  <p>Thanks in advance.</p>
  
  <pre><code>figure h2.world {
    position: absolute;
    top: 20%;
    left: 61%;
    background-color: transparent;
    font-size: 7em;
    color: white;
    font-family: Paytone One, Verdana, sans-serif;
    transform: translateX(300%);
    text-shadow: 0px 0px 50px black;
  
    -moz-animation-name: slideWorld;
    -moz-animation-iteration-count: 1;
    -moz-animation-timing-function: ease-in;
    -moz-animation-duration: 0.4s;
    -moz-animation-delay: 1.4s;
    -moz-animation-fill-mode: forwards;
  
    -webkit-animation-name: slideWorld;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-timing-function: ease-in;
    -webkit-animation-duration: 0.4s;
    -webkit-animation-delay: 1.4s;
    -webkit-animation-fill-mode: forwards;
  
    animation-name: slideWorld;
    animation-iteration-count: 1.4;
    animation-timing-function: ease-in;
    animation-duration: 0.4s;
    animation-delay: 1.4s;
    animation-fill-mode: forwards;
  }
  </code></pre>