缓动曲线编辑器

缓动曲线编辑器

cubic-bezier 可视化编辑,生成 transition / animation 时间函数

曲线编辑
500ms
实时预览

当前曲线

linear 匀速对比

生成的 CSS
cubic-bezier(0.4, 0, 0.2, 1)
transition: all 500ms cubic-bezier(0.4, 0, 0.2, 1);

animation 同样可用:animation-timing-function 接受相同的 cubic-bezier 值。

💡 使用说明

cubic-bezier(x1, y1, x2, y2) 中的 (x1, y1) 和 (x2, y2) 是两个控制点坐标:X 必须在 [0, 1](动画时间不能倒流),Y 可以超出 [0, 1] 表示属性先反向走或冲过终点再回弹,弹簧效果就是这么实现的。

进场用 ease-out(快→慢,物体像被推到位后停稳),退场用 ease-in(慢→快,动作干净利落);linear 只适合进度条、loading 等不需要质感的场景,UI 微动画建议都带缓动。

时长参考(Material 准则):按钮 hover、文字色变 100–150ms;卡片展开、菜单滑出 200–300ms;页面切换、模态框 400–500ms;弹簧回弹通常需要 600–1000ms 才能看出反弹质感。

预览区上下两条轨道分别使用当前曲线与 linear 匀速,往返循环播放,方便对比节奏差异。

版权所有 © 2026 章鱼工具箱