css - 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 に移動して停止させたいと考えています。

次を使用して、オブジェクトを最終的な位置に移動する2番目のアニメーションクラスを(javascript経由で)追加しようとしました:

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

ただし、これにより、オブジェクトはトランジションではなく、2 番目のアニメーションにジャンプします。

2 つのアニメーション間でほぼトゥイーンする方法について、何か提案やヒントはありますか?