动效调试 · 本地计算
CSS 缓动曲线实验台
相同的 600 毫秒，为什么有的动作先快后慢？用曲线、数值和一次播放核对。
1. 设置控制点
x 是时间方向，范围 0–1；y 是输出进度，本工具允许 -2–3，超出 0–1 可以产生反向或越界效果。
2. 核对曲线与运动
蓝线是输出进度，灰色虚线是匀速参照。橙点是两个控制点，不是动画经过的位置。
| 时间 | 0% | 25% | 50% | 75% | 100% |
|---|---|---|---|---|---|
| 位置 | 0.00% | 40.85% | 80.24% | 96.05% | 100.00% |
3. 导出样式
.motion-demo {
transition: transform 600ms cubic-bezier(0.25, 0.1, 0.25, 1);
}
.motion-demo.is-active {
transform: translateX(120px);
}
@media (prefers-reduced-motion: reduce) {
.motion-demo { transition: none; }
}
接入与边界
给元素添加 motion-demo 类，切换 is-active 类即可触发过渡。下载文件不包含 HTML 或点击事件；预览只平移 120px，真实页面需自行调整距离。动画不会自动循环或自动播放。
只生成一条 cubic-bezier 缓动，不生成关键帧、弹簧物理或弹跳多段曲线。改变时长不改变进度比例。这里的 y 限制是工具边界，不代表 CSS 规范要求 y 只能在此范围。不要把曲线参数 t 当作时间进度；表格先解 x(t) 再计算 y(t)。
参数和结果仅在当前页面内存中计算，不上传、不自动保存；刷新恢复默认值。尊重用户减少动态效果偏好，下载样式也提供相应媒体查询。
教程：600 毫秒的位移，怎样核对先快后慢 →