可视化拖拽控制点,生成 CSS 用三次贝塞尔缓动曲线
这是专为 CSS 动画制作的三次贝塞尔缓动曲线生成工具。解决手动编写 cubic-bezier 参数不准、效果不好调整的问题。
遵循 CSS 动画规范的三次贝塞尔曲线算法。拖拽两个控制点调整曲线形态,实时预览缓动动画效果,直接输出可用代码。
不支持,本工具仅生成 CSS 动画用的三次贝塞尔曲线。如需二次贝塞尔一般用于路径绘制,本工具不适用。
可以直接复制使用,符合 CSS 标准语法规范。复制后直接粘贴到 transition-timing-function 属性即可。
坐标范围是 X 轴 0 到 1,Y 轴无强制限制。超出范围会生成弹跳类的特殊缓动效果,浏览器也能正常解析。
调整控制点后动画会自动重置播放,等待一轮即可看到效果。也可以点击重播按钮手动触发预览。