css3 - 为什么translate3d动画暂停以简化计时器功能?

  显示原文与译文双语对照的内容

看一下这个jsfiddle版本。

我正在使用translate3d转换,它的计时器函数为'轻松':


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

为什么它不是一个连续的动画,而不是在中间暂停? 仅在使用ease-*作为计时器函数时才发生。 如果是这样的行为,如果是的话,我怎么才能成为连续的动画?

时间: 作者:

动画中使用关键帧,可以将计时函数应用到关键帧之间的每一个变换。

可以在关键帧上设置计时函数,也可以在动画上设置时间函数;这不会改变这些函数。

这意味着没有一个函数可以实现 ease animation完全的动画。 ( 很有趣的是,不容易获得轻松:-) )

但是,由于你只有两个转换( 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);
 }
}

注意,没有将计时函数应用于最后一个关键帧,因为它应用于间隔,而不应用于关键帧。

作者:

这是预期的行为?

是,ease-* 定时功能就是这样工作的。

下面是这个 的文档文档的视觉时序函数。

enter image description here

ease 表示计时函数 cubic-bezier(0.25, 0.1, 0.25, 1.0)

我如何才能使它成为一个连续的动画?

使用 linear,它表示计时函数 cubic-bezier(0.0, 0.0, 1.0, 1.0)

enter image description here

更新的CSS


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

更新示例

作者:
...