过渡突兀因默认ease（cubic-bezier(0.25,0.1,0.25,1)）起止过慢，需依动效目标手调cubic-bezier()参数：x1/y1控起步、x2/y2控收尾，y可超限实现过冲；须配合transition-property精准控制，并用DevTools或cubic-bezier.com调试验证。
过渡太突兀是因为默认的 ease 不够贴合动作直觉
浏览器默认的 transition-timing-function: ease 实际是 cubic-bezier(0.25, 0.1, 0.25, 1)，开头慢、中间快、结尾又慢——但很多交互（比如按钮悬停缩放、侧边栏滑入）需要更“果断”的启动或更“柔和”的收尾。直接换用 linear 又会显得机械，真正可控的方式是手调 cubic-bezier() 的四个参数。
用 cubic-bezier() 控制起始/结束的加速度
四个参数对应贝塞尔曲线的两个控制点：cubic-bezier(x1, y1, x2, y2)，其中 x1/y1 影响起步阶段，x2/y2 影响收尾阶段。关键约束：所有 x 值必须在 0 到 1 之间，y 值可超出（实现“回弹”或“过冲”效果）。
-
cubic-bezier(0.4, 0, 0.2, 1)：常用“缓入缓出”，比默认ease更平滑，适合模态框淡入 -
cubic-bezier(0.1, 0.8, 0.2, 1)：强化缓入，适合菜单从左侧滑入（避免“卡顿感”） -
cubic-bezier(0.34, 1.56, 0.64, 1)：y1 > 1，产生轻微“过冲”再回弹，适合按钮点击反馈
调试时建议用 Chrome DevTools 的动画检查器：选中元素 → Styles 面板 → 点击 transition-timing-function 右侧的曲线图标，拖动控制点实时预览。
别硬记数值，用工具生成再微调
手算贝塞尔曲线不现实，但也不能全靠随机试。推荐两个轻量方式：
立即学习“前端免费学习笔记（深入）”；
- 访问 cubic-bezier.com，拖动控制点，右侧自动生成 CSS 代码
- 在 VS Code 中安装插件 CSS Cubic Bezier，输入
cubic-bezier后按Tab快速插入常用曲线 - 对同一动效，在不同设备上测试：iOS Safari 对高阶贝塞尔支持略差，避免 y 值绝对值 > 2
和 transition-property 配合才能精准生效
只改 timing-function 不够，如果过渡属性没限定清楚，可能触发意料外的连锁变化。比如想让 transform 和 opacity 都过渡，但希望前者用缓入、后者用线性：
button {
transition-property: transform, opacity;
transition-duration: 0.3s;
transition-timing-function: cubic-bezier(0.1, 0.8, 0.2, 1), linear;
}
注意：多个 timing function 必须与 transition-property 的顺序严格对应，否则会被忽略。更稳妥的做法是拆成独立声明：
button {
transition: transform 0.3s cubic-bezier(0.1, 0.8, 0.2, 1),
opacity 0.3s linear;
}
这种写法更易读，也避免顺序错位导致的失效。
过渡曲线不是越花哨越好，真正难的是判断哪个动作该“蓄力”、哪个该“刹住”。调完记得关掉开发者工具的“动画减速”功能，用真实速度感受一次——人眼对毫秒级延迟极其敏感，而贝塞尔曲线里 0.05 的 y 值偏差，就可能让整个交互从“顺滑”变成“黏滞”。
