transition 对 color 做过渡大多无效，因浏览器不支持 color 属性平滑插值；可靠方案是用 background-clip: text + 渐变背景 + animation 控制 background-position 或 background 值。
直接用 transition 对 color 做过渡是无效的——浏览器不支持对 color 属性做平滑插值，除非你用的是纯色到纯色、且没有透明度或渐变干扰的极简场景。真正可靠的做法是绕过 color，改用 background-clip: text + 渐变背景 + animation 控制背景位置或色值。
为什么 transition: color 0.3s 大概率不生效
多数人写完 .text { color: red; transition: color 0.3s; } .text:hover { color: blue; } 发现跳变而非过渡，原因有三：
-
color的 CSS 动画支持依赖于浏览器对颜色空间插值的实现，老版本 Safari 和部分 Android WebView 完全忽略 - 一旦元素用了
background-clip: text或-webkit-text-fill-color，color就被覆盖，transition失效 - 如果文字同时带
text-shadow或透明度（opacity），过渡会更不可控
用 background-clip: text + @keyframes 实现真平滑过渡
这是目前兼容性好、效果稳、能控制节奏的主流方案。核心是把颜色变化“转嫁”到背景上：
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
.glow-text {
background: linear-gradient(90deg, #ff6b6b, #4ecdc4, #44b5b1);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
animation: slideGradient 4s ease-in-out infinite;
}
<p>@keyframes slideGradient {
0% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
100% { background-position: 0% 50%; }
}</p><p>/<em> 必须加这一行，否则 gradient 不动 </em>/
.glow-text {
background-size: 200% 200%;
}
</p>
-
background-size: 200% 200%是关键，它让渐变区域比文字宽高更大，才能通过background-position移动产生流动感 - 动画控制的是
background-position，不是color，所以 100% 平滑，无兼容性断层 - 若想“颜色切换”而非“流动”，可改用
@keyframes切换background值，但需注意重绘开销略高
需要鼠标悬停触发时，别只写 :hover
直接在 .text:hover 里改 background 值，动画不会自动播放——CSS 动画默认不响应伪类变更。正确做法是：
- 给元素同时定义常态和悬停态的
animation，比如常态用animation: idle 8s infinite，悬停时换成animation: pulse 2s infinite - 或者用 JS 切换 class：
el.classList.toggle('active')，再用.text.active { animation: ... } - 避免在
:hover中写transition+background，因为首次 hover 可能因渲染延迟出现卡顿
最易被忽略的一点：所有基于 background-clip: text 的方案，在 Firefox 120 之前不支持 mask-image 替代路径，而 Safari 对 background-clip 的硬件加速支持仍弱于 Chrome —— 如果你的用户大量使用旧版 macOS 或 iPadOS，务必加一层降级：用 @supports 检测， fallback 到单色 + text-shadow 模拟微光过渡。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
