为什么translate3d动画暂停以便于定时器功能？

Question

查看this jsfiddle。

我正在使用translate3d转换，其计时器功能为'ease'：

@keyframes anim {
    from {
        transform:translate3d(0px, 0px, 0px);
    }
    50% {
        transform:translate3d(100px, 100px,-100px);
    }
    to {
        transform:translate3d(200px, 200px, 0px);
    }
}

为什么它不是连续动画，而不是在中间暂停？仅当使用ease- *作为计时器功能时才会发生这种情况。这是预期的行为吗？如果是这样，我怎样才能使它成为连续动画？

Answer 1

在使用关键帧的动画中，计时功能应用于关键帧之间的每次过渡。

您可以在关键帧或动画处设置计时功能;这不会改变那些是单独功能的事实。

这意味着没有一个功能可以轻松实现完整动画的 easy 。 （很容易让轻松 :-)）

然而，由于你只有两个过渡（3个关键帧），一个近似的选择是为第一次过渡设置缓入，为第二次过渡设置缓出。

对于三个过渡，中间的过渡将是线性

@-webkit-keyframes anim {
    from {
        -webkit-transform:translate3d(0px, 0px, 0px);
        -webkit-animation-timing-function: ease-in;
    }
    50% {
        -webkit-transform:translate3d(100px, 100px,-100px);
        -webkit-animation-timing-function: ease-out;
    }
    to {
        -webkit-transform:translate3d(200px, 200px, 0px);
    }
}

fiddle

请注意，没有计时功能可以应用于最后一个关键帧，因为它应用于间隔而不是关键帧。

Answer 2

  

这是预期的行为吗？

是的，这就是ease-*计时功能的工作方式。

以下是关于动画计时功能的MDN documentation视觉效果。

  

ease代表时间函数cubic-bezier(0.25, 0.1, 0.25, 1.0)

  

如何使其成为连续动画？

使用linear代表计时功能cubic-bezier(0.0, 0.0, 1.0, 1.0)

  

更新了CSS

#a {
    animation: anim 1s linear infinite alternate;
    -webkit-animation: anim 1s linear infinite alternate;
}

UPDATED EXAMPLE