CSS动画-移动到起始位置

我有一个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); }  
}

但这会导致对象跳入第二个动画，而不是过渡

---

有没有人对如何在两个动画之间切换有任何建议或提示？

停止是什么意思？您可以在

-webkit animation

属性中指定动画仅使用一次。动画将无限期运行，直到用户与某个对象交互。然后应用一个新类，并使用一个新动画将对象从其当前位置（可能在初始动画期间的任何点）移动到其最终目标。第二个动画仅运行一次，问题是动画a和动画b之间的跳转。为什么不使用jQuery删除第一个类并添加新类呢？尝试避免使用javascript可能是只使用CSS制作动画的一个原因。但是，当您试图用javascript在动画中施加任何影响时，为什么不让整个事情变成jQuery呢？