javascript - CSS 关键帧移动有延迟

Question

我被这个动画难住了。我有一个正在创建移动路径的元素(不包括示例中的 vendor 前缀):

keyframes Path_1{
0%   {left:54%;top:66%;} 
50%  {left:54%;top:68%;} 
100% {left:54%;top:66%;}
}

这将创建一个简单的路径移动。向某些 JS 提供路径，如下所示:

"path" : "54,66||54,68"

JS循环遍历传入的所有坐标，自动生成路径移动关键帧。它还处理添加最后一个坐标对以循环动画。

我想知道是否有任何方法可以为每个点提供特定的速度/延迟？

keyframes Path_1{
    0%   {left:54%;top:66%;}  <- 1s
    50%  {left:54%;top:68%;}  <- 5s
    100% {left:54%;top:66%;}  <- 10s
}

谢谢!

Answer 1

您不能在关键帧声明中提供延迟作为额外参数。您基本上会获得百分比，您可以在其中定义哪些属性在百分比定义的动画片段总时间期间从什么开始动画。

但是，有一些方法可以做到这一点。我创建了一个jsfiddle here

.animation {
    width: 100px;
    height: 50px;
    background-color: #f00;
    animation: demo 5s ease-in infinite;
}

@keyframes demo {
    0% {
        width: 100px;
    }
    50% {
        width: 400px;
    }
    90% {
        width: 400px;
    }
    100% {
        width: 100px;
    }
}

我们可以看到动画被编程为持续 5 秒，但在某个时刻，通过将动画属性保持静态 n% 来实现延迟。在 50% 时，动画会保持在 400px 并保持这种状态，直到 90%，效果是暂停 2 秒。 5 秒的 40% = 2 秒。

还可以通过调整百分比和总时间来提高速度。动画的第一部分比第二部分慢，因为完成相同距离所花费的时间仅为总时间的 10%，而不是 50%。

像往常一样，CSS Tricks does a great run through可用的内容。

现在您只需在 json 中定义此数据并在 javascript 中解释它即可构建正确的关键帧动画，尽情享受吧!