color + @keyframes 可行但需注意兼容性、颜色格式统一及正确触发；推荐用 rgb()/hsl()、避免中文/缩写色值，加 animation-fill-mode 和 will-change 优化，移动端慎用无限动画。
直接用 color + @keyframes 是可行的，但要注意浏览器兼容性
现代浏览器（Chrome 43+、Firefox 16+、Safari 9.1+、Edge 12+）都支持对 color 属性做 CSS 动画，无需 JS。但老版本 Safari（比如 iOS 9.0–9.2）对 color 动画有渲染延迟或跳变问题，如果需兼容这些设备，得加 will-change: color 或改用 transform 模拟。
定义 @keyframes 时别用中文颜色名或缩写
CSS 动画依赖颜色值可插值计算，所以必须用浏览器能线性解析的颜色格式。以下写法会失败或不平滑：
-
color: red→ 不推荐，部分浏览器无法在red和#333间插值 -
color: hsl(0, 100%, 50%)→ 可行，但跨色相（如 0°→240°）可能走最长路径，视觉上“绕圈” -
color: #f00→ 可行，但十六进制不支持透明度，想带 alpha 得用rgba()或hsla()
最稳妥的是统一用 rgb() 或 hsl()，并确保起止值结构一致：
@keyframes textGlow {
0% { color: rgb(0, 0, 0); }
100% { color: rgb(255, 100, 50); }
}
动画触发要靠 class 切换，不能只靠 @keyframes 声明
@keyframes 只是定义动画片段，真正播放需要绑定到元素，并设置 animation 相关属性。常见疏漏：
立即学习“前端免费学习笔记（深入）”；
- 忘了加
animation-name和animation-duration，导致“写了但没动” - 用
animation-fill-mode: forwards后，文字颜色卡在终点值，后续 JS 修改color会被覆盖（除非提高优先级或移除 class） - 多个动画叠加时，
animation简写会覆盖之前设置的animation-delay等，建议拆开写或用简写全量声明
典型用法：
.glow-text {
color: #333;
animation-name: textGlow;
animation-duration: 1.5s;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
animation-direction: alternate;
}
性能敏感场景下避免高频重绘
color 动画本身开销低，但如果作用在大量文本节点（比如一屏 200+ 标题），或配合 :hover 频繁触发，仍可能引起轻微掉帧。可优化点：
- 给动画元素加
transform: translateZ(0)或will-change: color（仅在动画前临时加，结束后移除） - 避免同时动画
color+background-color+box-shadow，三者重绘区域不同，易触发 layout + paint 双开销 - 移动端慎用无限循环动画，iOS Safari 在后台标签页可能不暂停动画，持续耗电
简单交互动画更推荐用 transition 替代 @keyframes，比如悬停变色：
.hover-change {
color: #666;
transition: color 0.3s ease;
}
.hover-change:hover {
color: #e74c3c;
}
CSS 动画里 color 看似简单，但颜色空间插值、设备兼容、触发时机这三点最容易出 silent bug。尤其当设计师给的渐变是从黑到金（#000 → #d4af37），直接写会走 RGB 插值，结果中间冒出难看的棕灰——这时候就得手动拆成 HSL 或用工具生成关键帧。 
