鼠标悬停样式切换不流畅的根本原因是 transition 属性缺失或配置错误；应将其写在默认状态而非 :hover 中，仅作用于可过渡属性，优先使用 transform 和 opacity 避免重排，并合理设置 timing-function 与 duration。
鼠标悬停样式切换不流畅，通常是因为缺少或配置不当的 transition 属性。CSS 的 transition 本身就能实现平滑过渡，关键在于写对触发条件、属性名和时间函数。
确保 transition 写在「默认状态」而非 hover 状态
很多人误把 transition 放在 :hover 里，这会导致首次悬停无动画（因为 transition 是从 hover 状态“进入”时才生效，而浏览器没记录上一帧）。正确做法是把它写在元素的默认样式中：
.btn {
background: #007bff;
color: white;
transition: background 0.3s ease, color 0.2s ease; /* ✅ 正确：默认就声明 */
}
.btn:hover {
background: #0056b3;
color: #f8f9fa;
}只对可过渡的 CSS 属性使用 transition
不是所有属性都支持过渡。常见可过渡属性包括：color、background-color、opacity、transform、width/height（需有明确数值）、border-radius 等。以下写法无效：
-
transition: display 0.3s;→display不可过渡（用opacity+visibility替代） -
transition: position 0.3s;→position是关键字，不可过渡（改用transform: translate()） -
transition: font-size 0.3s;→ 可行，但需注意单位一致（如都用px或rem）
用 transform 和 opacity 替代布局类变化
直接改 width、left、top 等会触发重排（reflow），卡顿明显。优先用硬件加速的属性：
立即学习“前端免费学习笔记（深入）”；
- 移动位置 → 用
transform: translateX(10px)而非left: 10px - 显隐切换 → 用
opacity: 0+visibility: hidden组合，比display: none更顺滑 - 缩放/旋转 → 用
transform: scale(1.1)或rotate(5deg)
微调 timing-function 和 duration 提升感知流畅度
默认 ease 有时仍显生硬。试试这些更自然的组合：
- 按钮反馈：
transition: all 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94);（稍带弹性） - 图标缩放：
transition: transform 0.3s ease-out;（先快后慢，更稳） - 背景渐变：
transition: background 0.4s linear;（线性更均匀）
避免设过长（>0.5s）或过短（
基本上就这些。transition 不复杂但容易忽略细节——写对位置、选对属性、避开重排，悬停动画立刻顺滑起来。
