弹跳式 CSS 缓动曲线
通过拖动两个控制点来设计自定义 CSS Cubase-bezier() 计时函数，根据线性参考实时预览它，然后复制准备好的值。
处理中...
0%
结果
此页面打开生成器，其中 x1=0.68、y1=-0.55、x2=0.265、y2=1.55 已加载 - 一些缓动库标记为 escapeOutBack 的过冲曲线。 1 上面的负 y1 和 y2 正是下面的动画预览在稳定之前拉回其起点和终点的原因；拖动手柄或编辑数字以使效果更强或更柔和。
老实说这是什么：单个三次贝塞尔曲线只有两个控制点，因此它可以近似一个过冲和稳定运动，而不是具有几次递减跳跃的真正的多次弹跳物理弹跳。对于字面上的球弹跳效果，您需要将多个关键帧或步骤（）段链接在一起 - 这条曲线是普通过渡计时函数可以在一行中获得的最接近的曲线。
这种单一的超调仍然正是大多数有弹性的 UI 想要的：一个稍微超出其静止尺寸的按钮，一个在稳定之前超调的模式，一张弹到位的卡片。按原样复制该值以获得活泼的感觉，或将 y1 软化为 0，将 y2 软化为 1 以回拨过冲。