曲线参数

标准缓动曲线已生成。

曲线与运动

transition: transform 0.6s cubic-bezier(0.2, 0, 0, 1);

动画缓动预览

选择缓动预设或调整 cubic-bezier 控制点与时长，查看曲线和动画对照，复制 transition timing 代码，方便比较匀速、加速、减速与回弹效果。

整理：喜爱工具箱 · 更新于 。规则参考 MDN cubic-bezier：x1/x2 必须在 0–1，y1/y2 可超出该范围。

继续使用：阴影生成器 · 界面主题预览

使用说明

三步完成操作

  1. 01 · 选择预设

    从 ease、标准、强调或出场缓动开始。

  2. 02 · 调整控制点

    x1/x2 限制在 0–1；y1/y2 可超出 0–1，用于回弹或超调。

  3. 03 · 复制 CSS

    同时查看曲线、运动块和 transition timing 输出。

常见问题

使用前先了解这些

为什么 x 不能小于 0 或大于 1？

CSS cubic-bezier 的 x1 和 x2 必须在 0–1，超出时不是有效的缓动函数。

y 可以超出 0–1 吗？

可以。y1/y2 超出 0–1 会形成回弹或超调效果，首版限制在 -2–3。

减少动态效果时会怎样？

页面遵循减少动态效果偏好，动画示例会停止自动运动，但曲线和 CSS 仍可阅读。

它能编辑时间线动画吗？

不能。首版只处理单个 CSS 过渡的缓动曲线和时长。