CSS 缓动生成器
拖动两个控制点塑造自定义缓动曲线，通过小球预览实时效果，然后复制
cubic-bezier() 的值。
预设
工作原理
图表纵轴表示进度、横轴表示一秒钟内的时间。两个控制点都可以直接拖动，下方的数字输入框会随之保持同步，你既可以用鼠标或手指拖动，也可以直接输入精确数值来匹配特定曲线。这四个数字既驱动你看到的 SVG 路径，也驱动应用在预览小球上的真实 transition-timing-function，所以你看到的就是实际的缓动效果，而不是近似模拟。
一切都基于你浏览器自身的 CSS 过渡引擎运行，动画状态和曲线数据都不会被发送到任何地方。
常见问题
两个控制点分别控制什么？
三次贝塞尔缓动曲线由两个控制点定义，每个控制点都有 x（时间，0 到 1）和 y（进度，理论上不限范围，但通常在 0 到 1 之间）坐标。拖动某个控制点会直接设置该点的位置，下方显示的四个数字正是 cubic-bezier() 括号内的参数。
曲线可以超出 100% 吗？
可以。如果某个控制点的 y 值大于 1 或小于 0，动画就会在到达终值前短暂越过终值，或在开始前先低于起始值，形成“弹跳”或“预备”效果。你可以把控制点拖到图表上方或下方试试看。
这些内容会被发送到别的地方吗？
不会，曲线和预览动画完全通过你浏览器的 CSS 引擎运行，不会上传任何内容。