cubic-bezier() 中的四个数字是什么意思？

它们是两个控制点的 x 和 y 坐标：cubic-bezier(x1, y1, x2, y2)。曲线的起点和终点固定在 (0,0) 和 (1,1)，这两个手柄会弯曲它们之间的路径，以设定动画的加速方式。

为什么 x 值必须保持在 0 和 1 之间？

在 CSS 中，x 轴是动画随时间的进度，它只会向前推进。让 x1 和 x2 保持在 0 到 1，可保证曲线在每一时刻只代表一个值。y 可以超出该区间，以营造过冲或预备动作。

我如何做出有弹性或过冲的缓动？

给一个控制点一个大于 1 或小于 0 的 y。例如 cubic-bezier(0.34, 1.56, 0.64, 1) 会在稳定之前先过冲超过终点，读起来像一次轻柔的弹跳。把一个手柄拖到图的上方或下方即可做到这一点。

ease 和 ease-in-out 有什么区别？

ease 是 cubic-bezier(0.25, 0.1, 0.25, 1)，起步比对称的 ease-in-out（即 cubic-bezier(0.42, 0, 0.58, 1)）稍快一些。ease-in-out 均匀地加速和减速，而 ease 会把运动略微前置。

我也可以把这个值用于 animation-timing-function 吗？

可以。cubic-bezier() 可用于任何接受缓动函数的 CSS 位置，包括 transition-timing-function、animation-timing-function，以及 transition 和 animation 简写中的计时位。

拖动曲线会向服务器发送任何东西吗？

不会。编辑器、动画预览和生成的 CSS 都用纯 JavaScript 在你的浏览器中计算。关于你曲线的任何内容都不会上传到 ArrayKit。

cubic-bezier() 生成器

拖动两个控制点来塑造一条 CSS cubic-bezier() 缓动曲线，预览运动效果，并复制这条计时函数——全部在你的浏览器中完成。

这款 cubic-bezier() 生成器完全在你的浏览器中运行。你拖动的曲线、动画预览和生成的 cubic-bezier() CSS 绝不会离开你的设备，也不会有任何内容上传到 ArrayKit。

打开 CSS 格式化工具

关于 cubic-bezier() 生成器

这款 cubic-bezier() 生成器让你在一张实时图上拖动一条 CSS 缓动曲线的两个控制点，然后复制用于过渡或动画的精确 cubic-bezier(x1, y1, x2, y2) 计时函数。从 ease、ease-in-out 或有弹性的 ease-out-back 等命名预设开始，然后用鼠标或方向键微调手柄。一个动画小圆点会实时播放你的曲线，让你在粘贴之前先感受一下加速度。它专为那些在调校 transition-timing-function 或 animation-timing-function 的运动、又不想靠猜数字的前端开发者和设计师而设计。一切都在你的设备上渲染——曲线、预览和生成的 CSS 绝不会离开你的浏览器。

功能特性

在实时曲线上拖动两个控制点来塑造缓动
命名预设：linear、ease、ease-in、ease-out、ease-in-out 和 back 曲线
动画小圆点以及缩放/透明度演示实时播放曲线
复制精确的 cubic-bezier() 值和一条现成的 transition-timing-function 规则
用方向键微移每个手柄，实现像素级精准调校
过冲手柄让你构建 y 超过 1 的有弹性 ease-back 曲线
x 值会自动钳制进 CSS 要求的 0 到 1 区间
当当前曲线匹配某个标准预设时会识别并标注它

如何使用 cubic-bezier() 生成器

选择像 ease-in-out 这样的预设作为起点
拖动任一控制点以重塑曲线，或用方向键微移它
观看动画预览，感受你构建出的加速度
复制 cubic-bezier() 值或完整的 transition-timing-function 规则
将它粘贴进你的 CSS transition 或 animation 简写中

示例

输入

control point 1: 0.34, 1.56
control point 2: 0.64, 1

输出

.card {
  transition: transform 300ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

一条 ease-out-back 曲线过冲超过 1，营造出细微的弹跳。

常见错误与故障排除

浏览器忽略了我的 cubic-bezier() 并回退到 linear。 — 两个 x 值都必须在 0 到 1 之间。本工具会为你钳制它们，但手打的、超出该区间的 x1 或 x2 会让整个值无效。
动画在开头和结尾看起来很生硬。 — 把每个手柄拉得离它的端点更远。靠近 (0,0) 和 (1,1) 的手柄几乎不会弯曲曲线，因此运动会保持近乎线性。
我想要弹跳，但 y 值弹回去了。 — 把一个控制点拖到图的顶部之上，让它的 y 超过 1（或低于 0）。只有 x 受约束；正是 y 的过冲营造出预备动作和弹跳。
我拖动一个手柄后，预设不再被识别了。 — 任何改动都会让曲线变为自定义，因此预设标签会消失。重新点击预设标签即可吸附回它的精确值。

常见问题

cubic-bezier() 中的四个数字是什么意思？: 它们是两个控制点的 x 和 y 坐标：cubic-bezier(x1, y1, x2, y2)。曲线的起点和终点固定在 (0,0) 和 (1,1)，这两个手柄会弯曲它们之间的路径，以设定动画的加速方式。
为什么 x 值必须保持在 0 和 1 之间？: 在 CSS 中，x 轴是动画随时间的进度，它只会向前推进。让 x1 和 x2 保持在 0 到 1，可保证曲线在每一时刻只代表一个值。y 可以超出该区间，以营造过冲或预备动作。
我如何做出有弹性或过冲的缓动？: 给一个控制点一个大于 1 或小于 0 的 y。例如 cubic-bezier(0.34, 1.56, 0.64, 1) 会在稳定之前先过冲超过终点，读起来像一次轻柔的弹跳。把一个手柄拖到图的上方或下方即可做到这一点。
ease 和 ease-in-out 有什么区别？: ease 是 cubic-bezier(0.25, 0.1, 0.25, 1)，起步比对称的 ease-in-out（即 cubic-bezier(0.42, 0, 0.58, 1)）稍快一些。ease-in-out 均匀地加速和减速，而 ease 会把运动略微前置。
我也可以把这个值用于 animation-timing-function 吗？: 可以。cubic-bezier() 可用于任何接受缓动函数的 CSS 位置，包括 transition-timing-function、animation-timing-function，以及 transition 和 animation 简写中的计时位。
拖动曲线会向服务器发送任何东西吗？: 不会。编辑器、动画预览和生成的 CSS 都用纯 JavaScript 在你的浏览器中计算。关于你曲线的任何内容都不会上传到 ArrayKit。