有延迟的 CSS 关键帧移动

Posted 2023-03-06

【中文标题】有延迟的 CSS 关键帧移动

【英文标题】：CSS Keyframe Movements with Delays

【发布时间】：2014-05-25 01:38:41

【问题描述】：

我被这个动画难住了。我有一个元素正在创建移动路径（不包括示例中的供应商前缀）：

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

谢谢！

【参考方案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% 时，动画会停留在 400 像素并一直保持到 90%，效果是 2 秒的暂停。 40% 的 5 秒 = 2 秒。

速度也可以通过调整百分比和总时间来实现。动画的第一部分比第二部分慢，因为覆盖相同距离所花费的时间只是总时间的 10%，而不是 50%。

像往常一样，CSS Tricks does a great run through 有什么可用的。

现在你只需要在你的 json 中定义这些数据并在你的 javascript 中解释它来构建正确的关键帧动画，玩得开心！