用于坠落、振动等的 CSS 动画

Question

我希望使用纯 CSS 为逼真的移动对象制作动画。具体来说:

1. 东西掉落/弹跳
2. 一根振动的弦(简谐运动/正弦波)
3. 某物在流体中下落(从静止到最终速度)

据我所知，CSS 中的流畅动画目前只能通过使用三次贝塞尔曲线来实现:

https://developer.mozilla.org/en-US/docs/Web/CSS/timing-function

我发现下落可以通过 cubic-bezier(0.33, 0, 0.66, 0.33) 和 cubic-bezier(0.33, 0.66, 0.66, 1) 精确建模) 可以在这里看到向上反弹:

http://jsfiddle.net/BYossarian/Frg74/2/

有谁知道 (2) 和/或 (3) 的最佳贝塞尔曲线？如果有人对任何其他类型的物理运动有任何意见，那也很好。

如果需要，我可以目测一下，但我希望有人可能已经有了。

Answer 1

好的，所以我一直在玩这个，并完成了振动。正如我所预料的那样，我必须将一堆贝塞尔曲线拼凑在一起才能使其工作:

http://jsfiddle.net/BYossarian/wrK44/6/ (仅限 webkit 前缀)

红球是CSS动画，灰框是JS动画，引用。单击容器以启动/停止。

动画的 CSS(无前缀)是:

.vibrate {
    animation: shm 2s infinite alternate;
}

@keyframes shm {
    from {
        margin-left:0px;
        animation-timing-function: cubic-bezier(0.25, 0.01, 0.55, 0.16);
    }
    25% {
        margin-left:29.3px;
        animation-timing-function: cubic-bezier(0.52, 0.44, 0.47, 0.44);
    }
    50% {
        margin-left:100px;
        animation-timing-function: cubic-bezier(0.53, 0.56, 0.48, 0.56);
    }
    75% {
        margin-left:170.7px;
        animation-timing-function: cubic-bezier(0.45, 0.84, 0.75, 0.99);
    }
    to {
        margin-left:200px;
    }
}

注意事项:

1. 这是从一个边缘开始的，而不是振动的中间。如果你需要从中间开始，你可以使用 animation-delay 来抵消它。 .
2. 您可以通过将它们全部乘以某个常数来放大/缩小距离，它应该有效。
3. 这里给出的 animation-duration 是球从一个边缘移动到另一个边缘的时间(回程通过设置 animation-direction: alternate;), 所以上面的对象做一个完整的循环所花费的时间是4s。

更新:好的，所以我终于找到时间进行流畅的运动:

http://jsfiddle.net/S7WRp/ (同样，仅限 webkit 前缀)

点击开始。第一个球是通过 JS 动画的。其次是CSS动画。第三个和第四个都以恒定速度(其他球的最终速度)行进并用作引用，因此您可以看到前两个球在开始时加速，然后在最后达到最终速度。

CSS:

@keyframes fluidDrop {
    from {
        top: 0px;
        animation-timing-function: cubic-bezier(0.7, 0.22, 0.725, 0.61);
    }
    13.33% {
        top: 31.79px;
        animation-timing-function: cubic-bezier(0.16, 0.1875, 0.24, 0.094);
    }
    23.66% {
        top: 88.3px;
        animation-timing-function: cubic-bezier(0.234, 0.15, 0.88, 0.85);
    }
    65% {
        top: 441.5px;
        animation-timing-function: linear;
    }
    to {
        top: 800px;
    }
}

更多注释:

1. 物体的形状和流体的粘度会影响这里的东西，所以我只选择“平均”粘度和球形物体作为“一刀切”。
2. 要使用它，只需将动画时间设置为您需要的任何值，然后按比例缩放 top 值以匹配您希望对象下落的距离。现在，它下降了 800 像素的距离，因此，例如，如果您希望它下降 1600 像素的距离，您可以将所有关键帧的所有 top 值乘以 2。