text-shadow 无法触发 CSS 过渡，应改用 color 属性配合 transition 实现文字颜色渐变；需确保状态变化可被检测（如 hover）、避免 !important 覆盖、正确设置触发选择器与过渡时间（0.2s～0.4s）。
text-shadow 不能触发 CSS 过渡，别白费劲
直接对 color 设置 transition 是可行的，但很多人误以为给 text-shadow 加过渡也能“渐变文字色”，其实不行——text-shadow 的颜色变化本身不触发重绘动画，浏览器不会平滑插值。真正能过渡的只有 color、opacity、transform 等少数属性。
正确写法：给 color 加 transition 并确保触发重绘
关键不是加了 transition 就一定动起来，得满足两个条件：一是属性本身可过渡，二是状态变化能被浏览器检测到（比如 hover、class 切换）。常见错误是忘了加触发源，或用了不支持过渡的伪元素/内联样式覆盖。
-
color必须写在可被动态修改的选择器上（如.btn或a:hover），不能只写在::before里 - 过渡时间建议用
0.2s～0.4s，太长显得迟滞，太短像没动 - 避免用
!important覆盖过渡声明，它会切断过渡链
button {
color: #333;
transition: color 0.3s ease;
}
button:hover {
color: #007bff;
}
遇到 hover 不动？检查这三处
最常卡在这几个地方，不是代码写错，而是上下文干扰：
- 父元素或自身有
pointer-events: none，导致 hover 根本不触发 - CSS 优先级冲突：比如外部库写了
button { color: red !important; }，覆盖了你的过渡规则 - 用了
will-change: transform却没配transform变化，反而让 color 过渡失效（某些旧版 Chrome）
想实现更复杂的“渐变色文字”效果？别硬刚 color 过渡
纯 color 过渡只能在两种实色间切换。如果要从红变蓝再带点透明感，或者沿文字路径做色带流动，就得换方案：
立即学习“前端免费学习笔记（深入）”；
- 用
background-clip: text+-webkit-text-fill-color: transparent配合background-image: linear-gradient()，再对background-position做过渡（这个可动） - 需要逐字动画？得用 JS 拆分
<span></span>，再用animation控制每个字符的color - 动画帧率敏感场景（如滚动中文字变色），优先用
transform或opacity替代color，更稳
.gradient-text {
background: linear-gradient(45deg, #ff6b6b, #4ecdc4);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
background-size: 200% 200%;
transition: background-position 0.5s ease;
}
.gradient-text:hover {
background-position: 100% 100%;
}
CSS 文字颜色过渡看着简单，实际最容易栽在「以为加了 transition 就万事大吉」——状态没触发、优先级被压、甚至浏览器把 color 当作非动画属性优化掉了。真要稳，先确认 hover/class 确实生效，再看 computed style 里 transition 是否被解析出来。 
