按钮背景色过渡生硬的根源在于transition设置不精准，需精确指定background-color、采用0.25s时长、声明明确颜色值，并搭配ease-in-out缓动函数。
按钮背景颜色过渡生硬，根本原因不是“没加 transition”，而是加得不精准、时长不合理、状态值缺失或缓动函数失配。只要改三处，90% 的生硬感立刻消失。
transition 只写 background-color，别碰 all
用 transition: all 0.3s 是最常见误操作——它会让 border、padding、opacity 等所有可变属性都参与动画，哪怕你只改了背景色。结果是按钮轻微晃动、文字微跳，甚至触发重排（reflow）。
- ✅ 正确写法：
transition: background-color 0.25s ease; - ✅ 多属性协同（如同时动背景和文字色）：
transition: background-color 0.25s ease, color 0.25s ease; - ❌ 错误写法：
transition: all 0.25s;或transition: background 0.25s;（background是复合属性，浏览器行为不一致）
0.25s 是黄金时长，0.1s 和 0.5s 都容易翻车
过渡时间不是越长越“高级”，也不是越短越“灵敏”。0.25s 是人眼能清晰感知变化、又不觉得拖沓的临界点。超出这个范围，体验会明显劣化：
- 0.1s：太快，用户几乎察觉不到变化，像没生效；移动端尤其难捕捉
- 0.25s：默认推荐值，适配大多数按钮尺寸和交互节奏
- 0.3s–0.35s：仅当按钮带阴影增强或轻微位移（如
transform: translateY(-1px)）时可用，给视觉留余韵 - 0.5s：已显迟滞，用户会产生“卡顿”错觉，尤其在表单提交类按钮上应避免
:hover 和默认态必须都声明具体颜色值
transition 不是魔法，它依赖两个确定的数值做插值计算。如果任意一端是 transparent、inherit、unset 或干脆没写，浏览器无法生成中间帧，就会直接跳变。
立即学习“前端免费学习笔记（深入）”；
- ✅ 有效示例：
button { background-color: #4A90E2; } button:hover { background-color: #1E5799; } - ❌ 无效组合：
button { background-color: transparent; } button:hover { background-color: #1E5799; }（透明色无法插值） - ⚠️ 注意继承链：
button { background-color: inherit; }同样失效，即使父元素有颜色，inherit不参与过渡计算
ease-in-out 比 ease 更顺滑，但别滥用 cubic-bezier
默认的 ease 是「慢–快–慢」，对纯颜色切换稍显拖沓；ease-in-out 更平衡，入场和收尾都柔和，适合绝大多数按钮场景。
- ✅ 推荐起步：
transition: background-color 0.25s ease-in-out; - ✅ 追求更自然反馈（如 Material 风格）：
transition: background-color 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94); - ❌ 避免
linear：匀速运动缺乏真实感，像机械臂，用户会觉得“冷” - ⚠️ 注意：cubic-bezier 值要成对出现（四个参数），少一个或格式错（如漏括号）会导致整条
transition失效，回退到无动画
真正难调的不是参数本身，而是忘记检查「状态是否完整」——:hover 有了，:active 和 :focus 却没同步加过渡，导致点击瞬间突兀变色。这点在键盘导航或触屏设备上尤为明显。
