正确做法是将 transition: color 0.3s 写在元素默认状态（如 a { color: #333; transition: color 0.3s ease; }），而非 hover 状态，并统一颜色格式（如全用 hex 或 rgb），以确保平滑过渡。
直接加 transition: color 0.3s 就能解决，关键是要加在正常状态（非 hover）上，且确保颜色值可被浏览器平滑插值（比如都用 hex、rgb 或 hsl，别混用）。
transition 必须写在默认状态上
很多人把 transition 写在 hover 里，这是无效的——CSS 过渡必须定义在**初始状态**（即未 hover 时的规则中），浏览器才能知道“从哪开始过渡”。
- ✅ 正确写法：a { color: #333; transition: color 0.3s ease; } + a:hover { color: #007bff; }
- ❌ 错误写法：a:hover { color: #007bff; transition: color 0.3s; }（hover 时才加 transition，没用）
避免颜色格式冲突导致过渡失效
如果默认色用 #333，hover 色用 rgba(0,123,255,1)，部分浏览器可能无法平滑过渡。统一颜色表示法更稳妥：
- 全用十六进制：
#333→#007bff - 全用 rgb：
rgb(51, 51, 51)→rgb(0, 123, 255) - 或全用 hsl（适合调色系）：
hsl(0, 0%, 20%)→hsl(210, 100%, 50%)
微调让渐变更自然
0.3s 是常用时长，但可根据设计节奏调整；ease 比 linear 更柔和，适合文字颜色变化：
立即学习“前端免费学习笔记（深入）”；
-
transition: color 0.25s ease;—— 稍快，适合简洁界面 -
transition: color 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);—— 更轻盈的缓动效果 - 如需 hover 时顺便加一点位移或缩放，可组合写：
transition: color 0.3s ease, transform 0.2s ease;
基本上就这些——不复杂但容易忽略细节。加对位置、统一格式、小调时长，hover 文字就能稳稳地“淡入”新颜色了。
