使用CSS过渡模仿XD的“快照”动画

Question

在此视频中，是使用Adobe XD制作的原型。 https://imgur.com/BhQ2X9F

我正在尝试重现用于使效果在CSS中弹跳的“捕捉”动画，但我无法正确地做到这一点。

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

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

我需要帮助来再现用css视频中看到的软反弹动画（在XD中也称为“快照”）。

Answer 1

看看小提琴和视频，我看到的唯一真正的区别是，当您只希望动画在过渡结束时弹起时，动画在开始和结束时都会弹起。 Firefox的过渡立方贝塞尔曲线编辑器非常酷，这就是我想出的：

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