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

imitate XD's "snap" animation using css transitions

此视频中是使用 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")。

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

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