按钮 hover 背景颜色不平滑需在常态样式中添加 transition: background-color 0.3s ease；若用渐变则改用 background 过渡；避免 all 和无效位置声明，并排查覆盖、属性不可动画及继承问题。
按钮 hover 背景颜色不平滑？检查是否漏了 transition
默认情况下，:hover 的背景色切换是瞬时的。必须显式声明 transition 才能触发平滑过渡。常见错误是只写了 background-color 变化，却没加 transition 属性，或者写在了 :hover 伪类里（无效）。
-
transition必须写在**常态样式（非 hover）**中，浏览器才能识别“从什么状态开始过渡” - 只过渡背景色就写
transition: background-color 0.3s ease;，避免用all 0.3s ease——可能意外触发其他属性动画，影响性能 - 如果按钮用了渐变背景（
linear-gradient），background-color过渡无效，得用background整体过渡（但兼容性略低）
用 ease 还是 cubic-bezier？看控制精度需求
ease 是默认缓动，先慢后快再慢，适合大多数按钮；但如果你需要更精细的节奏控制（比如强调“按下感”或“弹出感”），就得换 cubic-bezier。
-
ease-in-out：比ease更对称，起止更柔和，适合轻量交互 -
cubic-bezier(0.25, 0.46, 0.45, 0.94)：常用“轻微弹性”效果，比纯ease更有反馈感 - 不要用
ease-in或ease-out做按钮悬停——起始或结束太突兀，用户感知为“卡顿”
为什么加了 transition 还是不生效？排查这三点
最常踩的坑不是语法错，而是样式被覆盖或属性不可动画。
- 检查是否用了
!important覆盖了 transition 声明（尤其是第三方 CSS 框架） - 确认悬停目标是
background-color，而不是background（后者若含图片/渐变，部分旧浏览器不支持过渡） - 确保没有其他规则重置了 transition，比如父元素写了
transition: none并被继承（虽然transition不继承，但某些框架会全局重置）
button {
background-color: #007bff;
color: white;
border: none;
padding: 8px 16px;
transition: background-color 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
button:hover {
background-color: #0056b3;
}
移动端点击无反馈？补上 :active 状态
触摸设备上，:hover 触发不稳定（尤其 iOS Safari），仅靠 hover 会导致点击无视觉反馈。必须配合 :active 显式定义按下态。
立即学习“前端免费学习笔记（深入）”；
-
:active的 transition 时间建议 ≤ 0.1s，否则按住时延迟明显 - 不要让
:active和:hover使用同一套缓动函数——按下要干脆，悬停要柔和 - 如果用了 CSS 自定义属性（
--bg），记得在:active中也更新变量值，否则 transition 会断掉
