CSS Easing 生成器
贝塞尔曲线编辑器
动画预览
常用缓动效果
在线 CSS Easing 缓动函数生成器。可视化拖拽控制点生成 cubic-bezier 曲线，内置 ease / ease-in / ease-out / ease-in-out / linear 预设，实时动画预览。纯前端处理。
使用技巧
拖拽控制点
直接在曲线上拖拽两个控制点（P1、P2），实时调整缓动曲线。X轴代表时间进度，Y轴代表属性变化，曲线斜率决定动画的速度变化。
动画实时预览
点击「播放动画」即可看到小球沿缓动函数轨迹运动的效果。进度条直观显示时间进度。
一键复制 CSS
调整完成后，点击「复制」按钮即可自动将 CSS cubic-bezier() 代码复制到剪贴板，直接粘贴到项目中使用。
常见使用场景
入场动画
ease-out
退场动画
ease-in
过渡动画
ease-in-out
悬停效果
自定义曲线
进度指示器
linear
常见问题
什么是 cubic-bezier？
cubic-bezier 是一个 CSS 函数，用于定义动画的速度曲线，通过两个控制点 P1 (x1, y1) 和 P2 (x2, y2) 来描述一条三次贝塞尔曲线。曲线的 X 轴代表时间进度（0→1），Y 轴代表属性变化（0→1）。曲线越陡表示速度越快，越平缓表示速度越慢。
如何在 CSS 中使用自定义缓动？
直接在 CSS 的 transition 或 animation 属性中使用：transition: transform 0.3s cubic-bezier(0.25, 0.1, 0.25, 1);。生成器的代码输出区域会自动生成正确的 CSS 代码，点击复制即可直接粘贴使用。
X 和 Y 的有效范围是什么？
CSS cubic-bezier() 要求 X 值在 0 到 1 之间（对应时间从开始到结束），Y 值通常在 0 到 1 之间，但可以超出此范围（用于创建弹跳效果）。本工具将 X 限制在 [0, 1]、Y 限制在 [0, 1] 以确保生成的曲线是有效的 CSS 缓动函数。
预设缓动之间有什么区别？
ease：先快后慢再快，适合一般过渡效果。
ease-in：慢到快，适合退场动画（元素离开）。
ease-out：快到慢，适合入场动画（元素进入），最常用的缓动。
ease-in-out：两端慢中间快，比 ease 更平滑。
linear：匀速，适合颜色变化、旋转等无需加速的动画。