transition必须写在非:hover规则里，否则首次悬停无动画；渐变色不可直接过渡，应改用伪元素opacity控制显隐；移动端需用:active或JavaScript fallback替代:hover。
transition 必须写在非 :hover 规则里
第一次悬停没动画，大概率是因为 transition 被错写在 .btn:hover 里。浏览器只在状态切换时触发过渡，而初始状态没有过渡定义，就直接跳变。
正确做法是把 transition 放在基础类中，比如：
.btn {
background-color: #4a6fa5;
transition: background-color 0.35s ease;
}
.btn:hover {
background-color: #2c4a70;
}
-
transition写在:hover外——否则首次悬停无过渡 - 避免用
all过渡所有属性，容易意外触发动画（比如height变化引发重排） - 时间建议控制在
0.3s–0.4s，太短不明显，太长显迟滞
linear-gradient 背景渐变不能直接过渡颜色 stop
想让 background: linear-gradient(to right, #ff6b6b, #4ecdc4) 悬停时变成另一组色值？别指望 background-image 能平滑过渡——大多数浏览器不支持渐变色 stop 的插值动画，实际表现是淡入淡出或卡顿。
更可靠的做法是用纯色过渡 + 伪元素模拟渐变滑动：
立即学习“前端免费学习笔记（深入）”；
.btn {
position: relative;
background-color: #4a6fa5;
transition: background-color 0.35s ease;
}
.btn::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
background: linear-gradient(90deg, #ff6b6b, #4ecdc4);
opacity: 0;
transition: opacity 0.35s ease;
}
.btn:hover::before {
opacity: 1;
}
- 渐变本身不动，靠
opacity控制显隐，兼容性好 - 若需“滑入”效果，可改用
background-position配合background-size，但需固定尺寸容器 - 移动端无 hover，这类效果默认不触发，别依赖它做核心交互反馈
:hover 动画失效的三个高频原因
按钮悬停没反应？先排查这几个硬性限制：
- 父容器设置了
overflow: hidden，且伪元素或 transform 溢出边界——动画被裁掉 - 用了
display: none/display: block切换，:hover在display: none状态下不生效 - CSS 伪类顺序写反了：必须是
:link → :visited → :hover → :active，否则:hover可能被覆盖
另外，transform 和 opacity 是性能最优的可过渡属性，优先选它们；避免对 width、height、margin 做过渡，会强制重排。
移动端 fallback 要手动补上 :focus-visible 或 :active
手机和平板没有鼠标悬停概念，:hover 在触摸设备上行为不可靠：可能不触发、延迟触发，或误触后残留状态。
如果按钮需要点击反馈，至少加一条 :active：
.btn:active {
transform: scale(0.98);
background-color: #1a3a5f;
}
-
:focus-visible更适合键盘用户，但目前 Safari 支持有限 - 真要兼顾多端，建议用 JavaScript 监听
touchstart动态加 class，而不是强依赖:hover - 别为了“视觉统一”强行在移动端模拟 hover 动画，体验反而割裂
