title: TranslateX an object and keep the final position
body: <p>I wrote a test with CSS transform-translateX. The animation works but the object doesn't keep the final position, returns to the original position.</p>
  
  <p>How can keep the final position?</p>
  
  <p>Here the CSS:</p>
  
  <pre><code>@-webkit-keyframes mover {
      0% { -webkit-transform: translateX(0); }
      100% { -webkit-transform: translateX(300px); }
  } 
  @-moz-keyframes mover {
      0% { -moz-transform: translateX(0); }
      100% { -moz-transform: translateX(300px); }
  } 
  @-o-keyframes mover {
      0% { -o-transform: translateX(0); }
      100% { -o-transform: translateX(300px); }
  } 
  @keyframes mover {
      0% { transform: translateX(0); }
      100% { transform: translateX(300px); }
  }
  
  #box {
      position: relative;
      top: 20px;
      left: 20px;
      width: 50px;
      height: 50px;
      background-color: #666;
  }
  
  .box-mover {
      -webkit-animation: mover 2s ease-in-out;
      -moz-animation: mover 2s ease-in-out;
      -o-animation: mover 2s ease-in-out;
      animation: mover 2s ease-in-out;
  }
  </code></pre>
  
  <p>Here the test:
  <a href="http://jsfiddle.net/junihh/1v0t9vs2/" rel="nofollow">http://jsfiddle.net/junihh/1v0t9vs2/</a></p>
  
  <p>Thanks for any help with this.</p>