使用方法
- 在图上拖动“控制点1”或“控制点2”。点击某个点后可用方向键微调；按住 Shift 键可加大步长。
- 需要精确曲线时，在“x1（0至1）”、“y1”、“x2（0至1）”和“y2”中输入准确的值。x 的值必须保持在0至1之间。
- 按下 ease-in-out 等预设，或在“动画预览”下按“播放”，看小球如何沿曲线移动。
- 复制“CSS”声明，并把它用于过渡（transition）或动画（animation）中。
四个数字的含义
三次贝塞尔缓动曲线从 (0, 0) 开始，到 (1, 1) 结束。它的两个控制点 (x1, y1) 和 (x2, y2) 决定其形状。横轴是已经过去的时间比例，纵轴是已经完成的变化比例。CSS 缓动函数规范（英文） 将控制点的 x 值限制在0至1之间，因为时间不能倒流，也不能超出终点。
y 值没有这样的限制。大于1或小于0的 y 值会使曲线过冲：变化超过终点后再折回，或一开始就朝相反方向移动。
cubic-bezier(x1, y1, x2, y2), where x1 and x2 are between 0 and 1预设与动画
关键字 ease 为 cubic-bezier(0.25, 0.1, 0.25, 1)，ease-in 为 cubic-bezier(0.42, 0, 1, 1)，ease-out 为 cubic-bezier(0, 0, 0.58, 1)，ease-in-out 为 cubic-bezier(0.42, 0, 0.58, 1)，均按规范给出。linear 缓动是一条直线，同样可以用 cubic-bezier(0, 0, 1, 1) 画出。
小球沿曲线运动，即动画的时间安排，因此您可以看到缓动以运动的形式呈现。若您的设备要求减少动态效果，动画会以暂停状态开始，点击“播放”后才会运行。
- 对于进入页面的元素，可用 ease-out 之类的柔和曲线；对于离开页面的元素，则用 ease-in。
- 过渡应当短促，使缓动能被感受到，而不是让人等待。
计算示例：时间过半时的进度
ease-in-out 曲线 cubic-bezier(0.42, 0, 0.58, 1) 关于其中心对称，因此在时间过半时，它恰好完成了一半的变化：读数显示0.5000。
ease 曲线 cubic-bezier(0.25, 0.1, 0.25, 1) 在同一时刻进度更靠前。时间过半时，它已完成0.8024的变化，因此开始时移动得快，末尾才放慢。
常见问题
小球显示的是什么？
小球从轨道左端运动到右端，其位置跟随曲线：水平位置即为迄今完成的变化比例。当曲线超过1时，小球越过轨道终点，并在那里被截去。
为什么 x 值不能超出0和1？
横轴是时间，而曲线覆盖的是从开始到结束的时间。开始之前或结束之后的时间在曲线上没有位置，因此规范把控制点的 x 值限制在0至1之间。y 值则没有这一限制。
ease-in 与 ease-out 有什么区别？
ease-in 开始缓慢，接近结束时加速；ease-out 开始迅速，结束时减速。两条曲线互为镜像，因此同样的变化在两者中是反向读取的。
同一个值既可用于动画，也可用于过渡吗？
可以。同一个 cubic-bezier() 值既可用于 animation-timing-function，也可用于 transition-timing-function，因此该声明可用于任一位置。
我拖动或输入的内容会被保存或发送到服务器吗？
不会。曲线和动画都在您的浏览器中生成。内容既不会保存，也不会发送到我们的服务器，因此离开页面前请先复制声明。
资料来源
数据和文字最近核对于2026年11月10日星期二。