1

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

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

有人对如何在两个动画之间进行几乎补间有任何建议或提示吗？

4

0 回答 0