CSS动画 - 移动到开始位置

Question

我有一个CSS动画，可以从左到右移动一个对象，然后再使用：

返回

@-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);}
}

此动画在无限循环上运行。

在某一点上，我希望物体移动到位置X，比如说50px，然后停下来。

我尝试添加第二个动画类（通过javascript），使用以下方法将对象移动到最终位置：

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

但是这会导致对象跳转到第二个动画，而不是转换。

有没有人对如何在2个动画之间进行补间有什么建议或提示？