600 毫秒的位移，怎样核对先快后慢

操作步骤

1. 打开 CSS 缓动曲线实验台，点击“标准 ease”，将时长设为 600 毫秒。核对四个控制点输入为 0.25、0.1、0.25、1。入口：https://www.jijie.ink/tool/css-easing 。
2. 查看表格时间 50% 一列，位置应约为 80.24%。600 毫秒的一半是 300 毫秒，120px 位移此时约完成 96.29px，而不是 60px。
3. 点击“播放一次”观察运动，点击“停止并复位”回到起点。选择“匀速”对照，此时时间 50% 的位置应为 50.00%；改变时长不会改变表格的比例。
4. 恢复“标准 ease”和 600 毫秒，点击“下载 CSS”。用文本编辑器打开 jijie-easing.css，核对 transform、600ms 和 cubic-bezier(0.25, 0.1, 0.25, 1)。
5. 在测试网页给元素添加 motion-demo 类，通过自己的按钮事件切换 is-active 类。下载只含样式，不包含 HTML 或事件逻辑；先核对真实页面效果再用于实际组件。

跟着示例试一次

一张卡片向右移动 120px，时长 600ms。标准 ease 在半程时间约完成 80.24%，匀速完成 50.00%。把时长改为 1200ms，比例不变，但半程时间变为 600ms。橙色控制点决定曲线形状，不是卡片必须经过的屏幕位置。

.motion-demo {
  transition: transform 600ms cubic-bezier(0.25, 0.1, 0.25, 1);
}
.motion-demo.is-active { transform: translateX(120px); }

怎样确认结果正确

匀速预设的时间 0%、25%、50%、75%、100% 应对应位置 0、25、50、75、100%。标准 ease 的时间 50% 对应约 80.24%，缓入缓出对应 50.00%。下载样式还包含 prefers-reduced-motion: reduce 媒体查询。轻微越界预设中途可超过 100%，结尾仍为 100%；这与 x 超范围被拒绝不同。

常见问题与边界

x1、x2 必须在 0–1；本工具 y1、y2 限在 -2–3，时长限 100–5000 毫秒整数，这个 y 限制不是 CSS 规范限制。清空字段或输入 x1=2 后，旧曲线和下载应消失。表格先求解 x(t) 再算 y(t)，不能直接把 t=0.5 当作半程时间。预览只有一次 120px 位移，不自动循环；系统开启减少动态效果时保留静态图表和数值，不播放。工具不生成关键帧、弹簧物理或多段弹跳，参数仅在页面内存计算，不上传、不自动保存。参考规范：https://drafts.csswg.org/css-easing-2/ ，函数说明：https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values/easing-function/cubic-bezier 。