CSS 缓动函数生成器
免费在线 CSS 缓动生成器。在交互曲线上拖拽 cubic-bezier 控制点，内置 18 种预设，小球循环动画实时对比，一键复制 timing function。
CSS 里的缓动函数是什么？
缓动函数控制动画或过渡随时间推进的快慢节奏。元素不必匀速运动，可以慢启动、加速、冲过头再回稳。在 CSS 中通过 transition-timing-function 或 animation-timing-function 属性设置。
cubic-bezier() 里的四个数字是什么意思？
cubic-bezier(x1, y1, x2, y2) 用两个控制点定义一条曲线。第一个控制点决定运动如何开始，第二个决定如何结束。X 表示时间，范围固定在 0 到 1；Y 表示进度，0 是起始值，1 是结束值。
为什么 Y 可以超出 0 到 1 而 X 不行？
X 对应真实时间，小于 0 或大于 1 会破坏时间因果，规范禁止。Y 则自由：大于 1 会冲过目标值，小于 0 会先回撤再前进，Back 系列预设的回弹感正是这样来的。
ease、ease-in、ease-out 有什么区别？
ease 是浏览器默认值，起步轻柔、收尾平滑；ease-in 慢启动快结束；ease-out 快启动慢减速；ease-in-out 两者兼顾。本工具还包含正弦、二次、三次、四次、指数、回弹、Material 等预设，共 18 种。
小球预览是怎么工作的？
两颗小球按你设定的时长循环运动。上方的球始终以 linear（匀速）作为参照，下方的球使用你的曲线。两者间距的拉大与缩小，直观展示缓动带来的速度变化。
生成的值应该粘贴到哪里？
把它作为 transition-timing-function 或 animation-timing-function 的值使用，例如 transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);。本工具输出裸的 cubic-bezier(...) 函数，可直接放进任何规则。
缓动函数会影响动画性能吗？
缓动函数本身零开销，它只是重新映射时间与进度的关系。性能取决于你动画化的属性：transform 和 opacity 走 GPU 合成很流畅，而 width、top 这类布局属性无论用什么缓动都会触发昂贵的重排。
能做出真正的弹跳或弹性效果吗？
单条 cubic-bezier 最多冲过一次目标，无法产生真弹跳的多次往复。需要多次回弹时，请在 @keyframes 里串联多个关键帧，或使用 Web Animations API；而 cubic-bezier 擅长的一次平滑回弹，正是本工具的强项。
我在这里的操作会被上传吗？
不会。曲线绘制在本地 Canvas 上，预览动画完全在浏览器中运行。任何数据都不会发往服务器，页面加载后离线也能使用。
如何使用CSS 缓动函数生成器
告别凭感觉填数字，用可视化方式雕琢 CSS 缓动曲线。拖拽控制点，与线性对照并排比较，一键复制成品 cubic-bezier。全部在浏览器本地完成。
- 先从 18 种预设中选一个起点，例如缓出、指数缓出或回弹缓出。
- 拖动曲线上的两个手柄：X 轴是时间，必须在 0 到 1 之间；Y 轴是进度，允许超出。
- 需要精确值时，直接用数字输入框微调 P1、P2 坐标。
- 调节时长滑杆，观察两颗循环滚动的小球——空心球始终匀速，实心球使用你的曲线。
- 把生成的 cubic-bezier 值复制到 transition-timing-function 或 animation-timing-function 中使用。
把某个 Y 手柄拉到 1 以上可以做出自信的过冲效果，例如 cubic-bezier(0.34, 1.56, 0.64, 1)，不用关键帧就能让按钮和卡片富有弹性。
相关工具
- CSS 渐变生成器 可视化创建精美 CSS 渐变。生成支持多色标、自定义角度和位置的线性、径向和锥形渐变。即时复制可投入生产的 CSS 代码。
- CSS 加载动画生成器 免费 CSS 加载动画生成器：十种纯 CSS 加载图标，实时调节尺寸、速度、粗细与颜色，一键复制即贴即用的 HTML 与 CSS 代码。
- 创意圆角生成器 免费在线创意圆角生成器。拖拽 8 个手柄或选择 blob 预设，快速创建有机 CSS 形状并复制 border-radius 代码。
- 颜色转换器 免费在线颜色转换器。即时转换 HEX、RGB、HSL、HSV 格式，带可视化拾色器。100% 隐私保护，浏览器本地运行。
- CSS 文字阴影生成器 免费在线 CSS text-shadow 生成器。多层阴影可调偏移、模糊、颜色与透明度，内置霓虹、3D、复古、光晕等预设，实时预览并一键复制代码。
- CSS clip-path 裁剪生成器 免费在线 CSS clip-path 生成器。支持 polygon、circle、ellipse、inset 四种模式，顶点可拖拽，实时预览并一键复制 CSS 代码。
- CSS格式化工具 即时格式化和美化CSS代码，将压缩的CSS转换为可读的、缩进良好的代码，支持自定义选项。
- CSS压缩器 免费在线CSS压缩工具。即时压缩和优化CSS代码，移除空白、注释和多余字符。减小文件体积，提升网页加载速度。