transition 对 color 变化没反应是因为未显式声明初始和目标 color 值，且需确保颜色格式一致、使用正确 transition 语法，并注意 dark mode 和媒体查询中的 transition 覆盖问题。
transition 对 color 变化没反应？检查是否写了初始值和目标值
CSS transition 不是监听颜色“变化”，而是对属性值的**插值动画**。如果元素初始状态没定义 color（比如靠继承或浏览器默认），过渡就无从谈起——没有起点，何来平滑？
常见错误现象：hover 时文字突然变色，毫无过渡；开发者以为 transition: color 0.3s 写对了，其实父级没设 color，子元素 hover 时才第一次计算颜色，浏览器无法插值。
- 必须显式声明初始
color（哪怕和父级一样），例如color: #333 - 目标状态（如
:hover）也要用具体颜色值，避免currentColor或inherit—— 它们在动画中不参与数值插值 - 确保两个状态的颜色格式可插值：都用
rgb()、都用十六进制、或都用hsl()；混用#fff和rgba(255,255,255,0.8)可能导致降级为“跳变”
transition-color 不是标准属性，别这么写
有人会写 transition-color: 0.3s，这是无效的。CSS 中没有这个属性，浏览器直接忽略。正确写法只有 transition 或 transition-property。
使用场景：只想过渡颜色，不想动背景或边框时，应明确限定属性：
立即学习“前端免费学习笔记（深入）”；
- 写
transition: color 0.3s ease（推荐，简洁） - 或写
transition-property: color; transition-duration: 0.3s（适合多属性分控） - 避免只写
transition: all 0.3s—— 容易误触发其他属性动画，影响性能，还可能暴露未预期的过渡（比如意外过渡了font-size）
颜色过渡卡顿或闪烁？注意重绘与合成层
color 属于“非合成属性”，浏览器每次动画帧都要重排+重绘，尤其在低端设备或复杂布局中容易掉帧。这不是代码写错了，是渲染机制限制。
性能影响明显时，可考虑折中方案：
- 改用
transform+ 半透明遮罩模拟颜色变化（例如用background: rgba(255,0,0,0.1)叠加在黑白文字上）—— 这类操作能触发 GPU 合成 - 把文字包进
<span>，对其单独启用will-change: color（仅当真有性能问题时加，别滥用） - 确认没有同时触发大量其他
transition，尤其是width、height、left/top等强重排属性
dark mode 下颜色过渡失效？检查媒体查询与层叠顺序
在 @media (prefers-color-scheme: dark) 中覆盖了 color，但没同步更新 transition 声明，就会导致深色模式下动画消失——因为新样式规则里压根没写 transition。
兼容性要点：
-
transition必须写在所有相关媒体查询内部，或提升到通用选择器中（比如写在.btn基础规则里，而非只在light块里） - 避免用
CSS custom property动态切颜色却忘了给变量加transition：CSS 变量本身不可过渡，得靠它驱动的color属性来过渡 - 检查 DevTools 的 Computed 面板，确认 hover 或媒体查询激活后，
transition是否仍生效（有时被更具体的规则覆盖）
颜色过渡看着简单，真正卡住人的往往是隐式继承、格式不一致、或者媒体查询漏配——这些地方一错，动画就静音了。
