控制点
0.4, 0, 0.2, 1
输出
cubic-bezier(0.4, 0, 0.2, 1)
设计配色
CSS 缓动曲线 - cubic-bezier 调试工具
可视化调节 cubic-bezier 四个控制点并预览缓动曲线，生成可直接用于 transition 与 animation 的缓动函数，适合按钮动效与页面转场。
CSS动画缓动
设计配色
CSS 缓动曲线
可视化调节 cubic-bezier 四个控制点并预览缓动曲线，生成可直接用于 transition 与 animation 的缓动函数，适合按钮动效与页面转场。
最终 CSS 转场代码
调整控制点或时长后，预览动画和复制代码会保持一致。
使用场景
- 调试按钮动效节奏
- 生成页面转场缓动
- 复刻设计稿动画曲线
如何使用
- 拖动或输入四个控制点
- 查看曲线预览
- 复制 cubic-bezier 值
示例输入输出
FAQ
能直接用于 transition 吗？
可以。复制出的 cubic-bezier(...) 可直接写入 transition-timing-function 或 animation-timing-function。
控制点取值范围是多少？
x 通常在 0–1；y 可超出 0–1 以产生回弹或过冲感，需结合预览确认。
工具列表
相关推荐
你可以从这里继续打开相近场景的工具，减少重复搜索。