什么是 CSS 三次贝塞尔曲线？
三次贝塞尔曲线定义了 CSS 动画或过渡如何随时间推进。你可以让元素缓慢淡入、快速加速，甚至超调并反弹，而不是以恒定速度移动。
cubic-bezier(x1, y1, x2, y2) 函数接受四个值来控制曲线上的两个点。这些点决定了动画的加速和减速 — 曲线的形状就是运动的形状。为什么使用可视化编辑器？
手工编写 cubic-bezier 值就像用坐标绘画 — 技术上可行但极其令人沮丧。可视化编辑器让你能够：
可视化反馈
并排比较
预设库
实时测试
使用方法
塑造你的曲线
在画布上拖动两个控制点手柄来塑造你的缓动曲线。靛蓝色手柄 (P1) 控制动画的开始，而琥珀色手柄 (P2) 控制结束。
使用预设
从 29 个按系列组织的内置预设中选择。CSS 组包括五个标准关键字（linear、ease、ease-in、ease-out、ease-in-out）。Penner 系列（Sine、Quad、Cubic、Quart、Quint、Expo、Circ、Back）各提供三个变体：In、Out 和 InOut。
预览你的动画
根据你的曲线实时观看动画球的运动。启用比较功能可看到第二个球以线性速度运动 — 这样可以轻松理解你的曲线与恒定运动的区别。
多属性预览展示你的缓动如何同时应用于位置、缩放、旋转和不透明度。调整时长滑块来测试不同的速度。
复制代码
点击复制按钮获取完整的 CSS 代码，包括 transition-timing-function 和 animation-timing-function。你也可以直接点击 cubic-bezier 值文本进行快速复制。
功能特性
交互式贝塞尔画布
基于 SVG 的画布显示你的三次贝塞尔曲线，包含坐标网格、轴标签和对角线性参考线。
- 两个可拖动的控制点
- 实时坐标显示
- 可视化网格和轴标签
29 个缓动预设
从 29 个预设开始，分为 9 组：5 个 CSS 标准缓动加上 8 个系列中的 24 个 Penner 缓动函数。
- CSS 标准缓动 (5 个)
- Penner 系列 (24 个变体)
- 迷你曲线缩略图
竞速比较
使用并排球竞速动画将你的自定义曲线与线性缓动进行比较。
- 并排比较
- 可视化速度差异
- 即时理解
多属性预览
看你的缓动曲线如何同时影响四个不同的 CSS 属性：位置、缩放、旋转和不透明度。
- 位置（水平运动）
- 缩放（大小变化）
- 旋转和不透明度效果
超调支持
Y 值可以超出标准 0–1 范围（从 -0.5 到 1.5），允许你创建超调目标并反弹的曲线。
- 范围：-0.5 到 1.5
- 反弹效果
- 自然感的动画
可调节的时长
使用时长滑块以不同速度测试你的缓动，范围从 200ms 的快速微交互到 3 秒的缓慢戏剧性过渡。
- 200ms 到 3000ms 范围
- 实时速度测试
- 完美的时间选择
常见问题
CSS 中的 cubic-bezier 是什么？
cubic-bezier(x1, y1, x2, y2) 是一个 CSS 函数，为过渡和动画定义自定义时间曲线。四个值控制两个手柄点，塑造动画在其持续时间内如何加速和减速。
四个值代表什么？
这些值代表两个控制点：P1 (x1, y1) 和 P2 (x2, y2)。X 值代表时间（0 = 开始，1 = 结束）且必须保持在 0 到 1 之间。Y 值代表进度，可以超出 0–1 范围以实现超调效果。
什么是 Penner 缓动函数？
Robert Penner 的缓动方程是一套广泛用于动画的标准数学曲线。每个系列（Sine、Quad、Cubic 等）有三个变体：
- In — 缓慢开始，快速结束
- Out — 快速开始，缓慢结束
- InOut — 缓慢开始和结束，快速中间
此编辑器提供这些曲线的三次贝塞尔近似。
Y 值可以小于 0 或大于 1 吗？
可以。Y 值小于 0 会使动画暂时向后运动，而大于 1 的值会使其超调目标。这会创建弹跳和弹簧般的效果。Back 缓动系列使用这个来实现其特有的超调。
向后运动
- 动画暂时向后运动
- 创建预期效果
超调运动
- 动画超调目标
- 创建反弹效果
ease 和 linear 之间有什么区别？
linear 以恒定速度从开始到结束运动。ease 开始缓慢，中间加速，结束时减速 — 这对人眼来说感觉更自然。
我如何使用生成的代码？
复制 CSS 输出并将其应用于你的过渡或动画：
.element {
transition: transform 0.3s cubic-bezier(0.25, 0.1, 0.25, 1);
}
.element {
animation: slide-in 0.6s cubic-bezier(0.25, 0.1, 0.25, 1);
}
还没有评论，快来发表第一条！