cubic-bezier 缓动曲线 是 CSS transition / animation 的核心节奏控制器，定义动画在时间线上的”加速/减速曲线”。所有现代浏览器原生支持，不依赖任何动画库。
| 类型 | 形态 | 用途 |
|---|---|---|
| linear | 直线 | 进度条、loading spinner、不需要质感的纯指示 |
| ease-out | 快→慢 | 入场（进入屏幕、展开、淡入） |
| ease-in | 慢→快 | 出场（消失、收起、滑出） |
| ease-in-out | 慢→快→慢 | 双向、循环动画 |
| spring / overshoot | 反向起步或冲过头 | 强调出现、回弹反馈 |
横轴是动画进度 0→100%（不可逆，所以 X ∈ [0, 1]），纵轴是属性值的”完成比例”——0 表示起始值，1 表示目标值。Y 可以为负或大于 1，那代表属性先反向走或冲过终点，spring 效果就是这么实现的。
UI 微动画绝大多数情况下要带缓动而非 linear——linear 显廉价。进场用 ease-out（让用户感觉物体被”推到位”停稳），退场用 ease-in（动作干净利落地消失）。Material 3 标准曲线 (0.4, 0, 0.2, 1) 是工业界用得最广的”通用 ease”，比 CSS 默认的 ease 节奏更紧凑，适合现代 UI。
本工具默认 1000ms 是为了观察曲线节奏，实际项目按上述三档调整。
是两个控制点的坐标：cubic-bezier(x1, y1, x2, y2) 中 (x1, y1) 是从动画起点 (0,0) 拉出的控制点，(x2, y2) 是从终点 (1,1) 拉回的控制点。X 必须在 [0, 1]（动画时间不能倒流），Y 可以小于 0 或大于 1（属性可以"超出"目标值再回弹，做出 spring 效果）。本工具拖拽两个圆点就能直接看到曲线变化。
ease = 慢→快→慢（CSS 默认值，平稳过渡）；ease-in = 慢→快（"加速进入"，常用在退场）；ease-out = 快→慢（"减速到位"，常用在进场，让用户感觉物体被推到目标后停稳）；ease-in-out = 慢→快→慢但更对称（用于双向往返）。linear 是匀速直线，机械感强，仅用于进度条、loading spinner 这种"不该表现物理质感"的场景。
弹簧效果的本质是先冲过头再回来——例如 (0.68, -0.55, 0.27, 1.55)，y1 = -0.55 表示动画前段先反向运动一点（"蓄力"），y2 = 1.55 表示后段冲过终点 55% 再被拉回。这种过冲是 cubic-bezier 表达 spring 的标准做法。注意 CSS Spec 限制 X 必须 [0, 1] 但 Y 不限——Chrome、Firefox、Safari 都支持负值和 > 1 的 Y。
linear 和 ease 看起来差不多但效果差很多？人眼对节奏极敏感——linear 在 200ms 内就能看出"机械感"，让交互显得廉价。CSS 默认的 ease 是 (0.25, 0.1, 0.25, 1)，慢→快→慢的微妙曲线，恰好对应物理世界里物体启动加速、减速到位的直觉感受。所有 UI 微动画（按钮、链接、菜单）默认都该是带缓动的，linear 仅用于持续性进度展示（加载条、circular spinner）。
Material 设计准则的建议：(1) 微小元素（按钮 hover、文字色变）100–150ms——再短人眼来不及感知，再长会觉得拖沓；(2) 中等元素（卡片展开、菜单滑出）200–300ms——人眼舒适跟随；(3) 大型元素（页面切换、模态框）400–500ms——给用户时间理解空间变化。spring/弹跳通常需要 600–1000ms 才能让回弹有戏剧效果。本工具默认 1000ms 是为了看清曲线节奏，实际使用时按上面区间调整。
可以。animation-timing-function 接受同样的 cubic-bezier 函数。区别是：transition 描述"属性从 A 到 B"，timing-function 应用整段；animation 由多段 keyframe 组成，timing-function 默认应用每段之间，或在每个 keyframe 单独指定 animation-timing-function。本工具复制的 cubic-bezier 在两种场景里都能用，只是把 transition: ... 换成 animation-timing-function: cubic-bezier(...) 即可。