CSS Cubic-Bezier 曲线生成器
颜色
用于 `cubic-bezier(x1, y1, x2, y2)` CSS 时序函数的交互式编辑器。拖动曲线上的两个控制点，或直接输入坐标。Y 值可超出 [0, 1] 以实现 overshoot 或 anticipation 效果。预览块按所选时长在你的曲线下来回动画，可亲身感受运动。预设覆盖 CSS 命名关键字（ease、ease-in/out）与常用自定义曲线。
—
预设
预览动画
CSS
transition-timing-function: cubic-bezier(0.42, 0.00, 0.58, 1.00);搭配 transition-timing-function 或 animation-timing-function 使用。
使用方法
- 拖动蓝色与红色把手塑造曲线。
- 或选预设（ease、ease-in-out、overshoot…）。
- 点 Play 在选定时长下感受运动，再复制 CSS。
常见问题
- 为什么 Y 可以 > 1 或 < 0？
- overshoot（回弹）与 anticipation（蓄势）效果需要 Y 跳出 [0, 1]。CSS 允许——动画值可在落定前短暂越过目标。
- X 呢？
- CSS 要求 X1、X2 在 [0, 1] 内，使曲线是时间的函数。滑块对 X 做钳制，对 Y 放开以支持 overshoot。
- 与弹簧物理的区别？
- Cubic-bezier 是固定时间上的确定性曲线；弹簧（`linear(...)` 或 JS）是真实物理模型——模型不同，简单场景下感觉相近。
- 在 CSS 哪里用？
- `transition-timing-function: cubic-bezier(...)` 用于过渡；`animation-timing-function:` 用于关键帧。Tailwind：`ease-[cubic-bezier(...)]`。