transition必须写在常态样式中，否则移出时会跳变；background-color需显式声明才能稳定过渡；linear-gradient不支持逐色过渡；推荐0.3–0.5s配合ease-out等缓动函数，避免重排属性。
transition 必须写在常态样式里，不能只放 :hover 中
这是最常被忽略的硬性规则。如果只在 .btn:hover { transition: background-color 0.3s; } 里写 transition，鼠标移入时有动画，但移出时会直接跳变——因为常态下没定义过渡逻辑，浏览器不知道“怎么收回去”。
正确做法是把 transition 放在非 hover 的基础规则中：.btn { background-color: #007bff; transition: background-color 0.3s ease; }。这样进出都有平滑过程。
background-color 是唯一能稳定过渡的背景颜色属性
想让背景“渐变”，别用 background 简写（比如 background: #fff url(img.png)），它会覆盖掉后续 background-color 的过渡声明；也别依赖继承或默认值——初始状态必须显式声明 background-color，否则浏览器无法确定“从哪开始过渡”。
常见踩坑点包括：
• background 和 background-color 混用导致悬停失效
• 初始没设 background-color，只靠父级背景透出
• 在 :hover 里改 background-image 或 linear-gradient，但没配好 fallback 或过渡兼容策略
线性渐变（linear-gradient）过渡有局限，别指望颜色逐段滑动
CSS 对 linear-gradient 的过渡支持很弱：浏览器实际做的是整个渐变色块的淡入淡出，而不是起点/终点颜色分别过渡。如果你写了：.btn { background: linear-gradient(45deg, #007bff, #00aaff); transition: background 0.4s ease; }.btn:hover { background: linear-gradient(45deg, #0056b3, #0080e6); }
效果是两个渐变整体切换，不是“蓝→深蓝”+“浅蓝→中蓝”的独立变化。
若真要滑动感，可配合 background-position 动画，但那已超出纯 :hover + transition 范畴，需额外规则。
过渡时间与缓动函数选错，交互就显得假
0.1s 太快，像抽搐；1s 太慢，用户以为卡了。实测 0.3–0.5s 是多数场景下的自然区间。
缓动函数别全用 ease：按钮点击反馈推荐 ease-out（先快后慢），强调视觉停留；文字变色可用 ease-in-out（更对称）；复杂位移如滑入可试 cubic-bezier(0.25, 0.8, 0.25, 1)。
另外，避免对 width、height、margin 做过渡——它们触发重排，容易卡顿；优先用 transform 和 opacity。
立即学习“前端免费学习笔记（深入）”；
过渡本身不难，难在细节控制：初始值是否明确、transition 是否落对位置、属性是否真的可动画——这些地方一漏，效果就断在鼠标移出那一瞬。
