css transition 颜色动画需显式声明 color 属性并使用可插值颜色格式，避免 transition: all；深色模式下应结合 CSS 变量与 prefers-color-scheme，并注意 safari 兼容性。
transition 里必须显式声明 color 属性
CSS transition 不会自动监听所有可动画属性，color 必须被明确写进过渡声明里。只写 transition: all 0.3s 看似省事，但部分浏览器（尤其是旧版 Safari）对 all 的颜色解析不稳定，容易跳变或失效。
- ✅ 正确写法：
transition: color 0.3s ease; - ❌ 避免写法：
transition: all 0.3s;（尤其在颜色过渡场景下） - 如果同时动背景和文字色，应写全：
transition: color 0.3s, background-color 0.3s;
color 值必须是可插值的格式
CSS 过渡依赖浏览器对颜色值的线性插值能力。使用命名色（如 red）、十六进制简写（如 #f00）或 RGB 十进制（如 rgb(255, 0, 0)）都没问题；但 HSL、HSLA、自定义 CSS 变量（var(--text-color)）需谨慎。
- HSL 支持良好，推荐用于控制色相/饱和度渐变：
color: hsl(0, 100%, 50%); → hsl(120, 100%, 50%); - CSS 变量本身不可直接插值，需配合
@Property（仅 chrome/edge 110+ 支持）或改用 js 控制 - 避免混用格式：从
#333到rgba(51, 51, 51, 0.8)可能导致透明度突变（因 alpha 解析逻辑差异）
:hover 或 class 切换时颜色没动？检查继承与层叠
常见现象：写了 transition: color 0.3s，也加了 :hover { color: blue; }，但鼠标移上去颜色立刻变，没有过渡。大概率是父元素或重置样式覆盖了子元素的 color 继承链。
- 用浏览器 DevTools 检查目标元素的最终计算值（Computed tab），确认
color确实发生了变化 - 确保初始状态有明确的
color声明（不能依赖继承值），例如：button { color: #333; transition: color 0.3s; }
button:hover { color: #007bff; } - 注意伪元素（如
::before）默认不继承color，需显式设置或用currentColor
深色模式下颜色过渡断裂？用 prefers-color-scheme + 自定义属性
当系统切换深色模式时，若靠媒体查询动态改 color，而过渡属性未作用于该变更路径，就会出现“闪一下再变”的情况。关键在于让颜色变化始终走同一套 transition 流程。
立即学习“前端免费学习笔记（深入）”；
- 把主题色抽成 CSS 变量：
:root { --text-primary: #333; }，并在@media (prefers-color-scheme: dark)中更新它 - 元素直接使用
color: var(--text-primary);，并确保transition: color 0.3s;存在 - ⚠️ 注意：Safari 16.4 之前不支持变量值变更触发 transition，需降级为 JS 监听
matchMedia并手动加 class
实际生效依赖两个条件：颜色值可插值 + transition 声明精准命中变化属性。很多人卡在第一步——以为写了 all 就万事大吉，结果在 Safari 里颜色就是不动。