CSS Animation - Moving to start position

I have a CSS animation that move an object from left to right, and back again using:

@-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%{ 开发者_StackOverflow社区-moz-transform:  translateX(100px);}
}

This animation runs on an infinite loop.

At a certain point I want the object to move to position X, say 50px, and stop.

I've tried adding a second animation class (via javascript), that would move the object in to it's final position using:

@-moz-keyframes droid-catching-position
{
     0% {   }
   100% { -moz-transform:  translateX(20px); }  
}

But this causes the object to jump in to the second animation, rather than transition.

Does anyone have any suggestions or hint on how to almost tween between 2 animations?