只用 :hover 配合 transition 就够了，@keyframes 是冗余的；它适合多阶段、非线性或循环动画，而纯颜色切换只需两态平滑过渡。
按钮悬停颜色变化该用 :hover 还是 @keyframes？
直接说结论：只做颜色变化，:hover 配合 transition 就够了，@keyframes 是冗余的。CSS 动画（@keyframes）适合需要多阶段、非线性或循环控制的动效，比如旋转+缩放+位移组合；而纯背景色/文字色切换，本质是两个状态间的平滑过渡，:hover + transition 更轻量、更可控、兼容性更好。
:hover + transition 实现平滑变色的要点
关键不是“能不能”，而是“怎么写才不翻车”。常见错误包括过渡失效、闪动、延迟响应：
-
transition必须写在默认状态（非:hover）里，否则悬停时无过渡效果 - 只过渡具体属性，避免写
transition: all 0.3s—— 它会意外触发 layout 或 paint，尤其在旧版 Safari 中易卡顿 - 颜色值尽量用
rgb()或hsl()，而非命名色（如red）或十六进制（如#ff0000），确保浏览器能插值计算中间帧 - 如果按钮有边框，记得同时过渡
border-color，否则边框会突变
示例：
button {
background-color: #4a6fa5;
color: white;
border: 2px solid #3a5a80;
transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
button:hover {
background-color: #3a5a80;
color: #e0e0e0;
border-color: #2a4a70;
}
什么情况下真得用 @keyframes 配合 :hover？
只有当你需要突破“两态过渡”限制时才值得上动画帧。比如：
立即学习“前端免费学习笔记（深入）”；
- 悬停时先轻微放大（scale(1.03)），再变色，最后加个微小上浮（translateY(-1px)）
- 颜色变化走非线性路径，比如从蓝→紫→粉，而不是直连两点
- 需要悬停后持续脉冲（
animation-iteration-count: infinite），比如“正在加载中”按钮
这时写法是：:hover 触发动画，@keyframes 定义过程。注意必须显式设置 animation-fill-mode: forwards，否则动画结束立刻回退到初始色：
@keyframes pulseBlueToPink {
0% { background-color: #4a6fa5; }
50% { background-color: #7a5ea5; }
100% { background-color: #e64a7a; }
}
button:hover {
animation: pulseBlueToPink 1.2s ease-in-out forwards;
}
移动端悬停（:hover）为什么经常不生效？
因为多数触摸设备没有“悬停”概念。iOS Safari 和 Android Chrome 在非链接/按钮元素上默认忽略 :hover，除非满足以下任一条件：
- 元素是
<a></a>或<button></button>（语义化标签） - 页面设置了
meta name="viewport"且user-scalable=no被禁用（不推荐） - 用 JavaScript 主动添加
touchstart类模拟 hover 状态（实际项目中更可靠）
所以，如果目标用户含大量手机端，别依赖 :hover 做核心交互反馈——改用点击态（:active）或 JS 控制的类名切换更稳妥。
