title: CSS Animation - Moving to start position
body: <p>I have a CSS animation that move an object from left to right, and back again using:</p>
  
  <pre><code>@-moz-keyframes animation_1{
      0%  { -moz-transform:  translateX(100px); }
      25% { -moz-transform:  translateX(200px);}
      50% { -moz-transform:  translateX(0px); }
      75% { -moz-transform:  translateX(300px); }
      100%{ -moz-transform:  translateX(100px);}
  }
  </code></pre>
  
  <p>This animation runs on an infinite loop.</p>
  
  <p>At a certain point I want the object to move to position X, say 50px, and stop. </p>
  
  <p>I've tried adding a second animation class (via javascript), that would move the object in to it's final position using:</p>
  
  <pre><code>@-moz-keyframes droid-catching-position
  {
       0% {   }
     100% { -moz-transform:  translateX(20px); }  
  }
  </code></pre>
  
  <p>But this causes the object to jump in to the second animation, rather than transition.</p>
  
  <p>Does anyone have any suggestions or hint on how to almost tween between 2 animations?</p>