CSS关键帧动画中的延迟移动

Question

我对这个动画感到困惑。我正在为一个元素创建一个移动路径（示例中不包括供应商前缀）：

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

这创建了一种简单的路径移动方式。路径可以通过以下方式提供给一些JS：

```javascript someJSFunction(path); ```

"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
}

谢谢！

- Aaron

Answer 1

在关键帧声明中，您不能将延迟作为额外参数提供。基本上，您会获得百分比，您可以在其中定义哪些属性在整个动画片段的时间内从什么到什么进行动画化，该百分比定义了该时间。

但是，有方法可以做到这一点。我已经在这里创建了一个jsfiddle

.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%时，动画停留在400像素处，并保持这种状态直至90%，效果是2秒的暂停。 5秒的40％= 2秒。

通过调整百分比和总时间也可以实现速度控制。动画的第一部分比第二部分慢，因为所用的时间仅占总时间的10%，而不是50%。

像往常一样，CSS Tricks does a great run through 提供了详细介绍。

现在你只需要在json中定义这些数据并在javascript中解释它们，以构建正确的关键帧动画。祝你玩得愉快！

- Toni Leigh