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

我需要帮助再现软反弹动画(又名“快照”在XD)，如在css的视频中看到。

Answer 1

看看你的小提琴和视频，我看到的唯一真正的区别是你的动画在开始和结束时都会反弹，而你只想让它在过渡结束时反弹。Firefox有一个非常酷的转换立方体-bezier编辑器，这是我想出来的：

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