我有一个 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,比如 50 像素,然后停止。
我尝试添加第二个动画类(通过 javascript),它将使用以下方法将对象移动到它的最终位置:
@-moz-keyframes droid-catching-position
{
0% { }
100% { -moz-transform: translateX(20px); }
}
但这会导致对象跳转到第二个动画,而不是过渡。
有人对如何在两个动画之间进行几乎补间有任何建议或提示吗?