使用 css 转换模仿 XD 的 "snap" 动画

Question

此视频中是使用 Adob​​e XD 制作的原型。 https://imgur.com/BhQ2X9F

我正在尝试重现用于在 css 中制作软弹跳效果的 "Snap" 动画，但我无法做到恰到好处。

这是我的尝试：https://jsfiddle.net/etw3qy48/2/

transition: all 0.3s cubic-bezier(0.68, -0.30, 0.265, 1.30);

我需要帮助来重现 css 视频中看到的软反弹动画（在 XD 中也称为 "snap"）。

Answer 1

看看你的 fiddle 和视频，我看到的唯一真正的区别是你的动画在开始和结束时都跳动，而你只希望它在过渡结束时跳动。 Firefox 有一个非常酷的 transition cubic-bezier 编辑器，这是我想出的：

transition: all 0.3s cubic-bezier(.18,.89,.45,1.36);