css - 使用 css 过渡模仿 XD 的“捕捉”动画

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);

我需要帮助重现软弹跳动画（在 XD 中也称为“snap”），如使用 css 的视频中所见。

Answer 1

看着你的小提琴和视频，我看到的唯一真正的区别是你的动画在开始和结束时都会反弹，而你只希望它在过渡结束时反弹。Firefox 有一个非常酷的转换三次贝塞尔编辑器，这就是我想出的：

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