transition颜色变化不生效，主因是作用于不可动画属性（如display、visibility）、自定义属性未用@property声明、色彩模型混用（rgb与hsl）或background简写含不可动画值。
transition颜色变化不生效？检查是否作用于可动画属性
直接写 transition: all 0.3s 却没反应，大概率是因为目标 CSS 属性本身不可动画。比如 display、visibility、z-index 都不能过渡；而 color、background-color、border-color 是支持的。但注意：CSS 自定义属性（--my-color）默认**不可动画**，必须配合 @property 显式声明才能参与 transition。
常见误操作：
- 对
background简写属性过渡，但其中混入了不可动画值（如background: url(...) center / cover），整个过渡会静默失败 - 用
rgba(255, 0, 0, 1)切换到hsl(0, 100%, 50%)—— 浏览器无法插值，会跳变；应统一色彩模型（都用rgb()或都用hsl()）
cubic-bezier(0.4, 0, 0.2, 1) 是什么？别硬记，用工具调
cubic-bezier() 的四个参数不是百分比，而是贝塞尔曲线控制点坐标：cubic-bezier(x1, y1, x2, y2)，其中 x1/y1 是起点控制点，x2/y2 是终点控制点，所有值必须在 [0, 1] 范围内。标准「缓入缓出」效果就是 cubic-bezier(0.4, 0, 0.2, 1)，但它只是经验拟合值，并非物理定律。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 调试时打开 Chrome DevTools → Elements → Styles → 点击
transition-timing-function右侧的小图标，直接拖动控制点预览效果 - 想模拟弹簧感？用
cubic-bezier(0.17, 0.67, 0.83, 0.67)（material design 的「标准弹跳」） - 避免写
cubic-bezier(0, 0, 1, 1)—— 这等价于linear，但可读性差，直接写linear更稳妥
transition触发时机不对？确保状态变更可被检测
写了 transition: color 0.3s，但 hover 时还是立刻变色，问题往往出在「状态变更未被浏览器识别为样式重排触发点」。比如：
- 通过 JS 修改
element.style.color是有效的，但若只改 class，而该 class 的 color 声明被更高级别选择器覆盖（如body.dark .btn { color: white; }），实际计算值没变，transition 就不会启动 - 用
requestAnimationFrame批量修改多个样式时，若把color和transform放在同一次渲染中设置，部分浏览器可能合并优化，跳过中间状态 - 元素初始无 color 声明（继承自父级），此时设置
color: red是「从无到有」，但 transition 仍会工作 —— 因为 computed style 有确定值
深色模式切换时颜色过渡生硬？用 prefers-color-scheme + 自定义属性
单纯靠媒体查询切换 color 不会触发动画，因为媒体查询变更不被视为「样式属性变更」。正确做法是结合 CSS 自定义属性和 @property：
/* 声明可动画的自定义属性 */
@property --text-color {
syntax: '<color>';
inherits: true;
initial-value: #333;
}
<p>:root {
--text-color: #333;
transition: --text-color 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}</p><p>@media (prefers-color-scheme: dark) {
:root {
--text-color: #ddd;
}
}</p><p>body {
color: var(--text-color);
}注意：@property 目前仅 Chromium 内核（Chrome/Edge/Opera）和 Safari 16.4+ 支持，Firefox 尚未实现。如果需兼容，只能退回到 JS 控制 class 切换 + 手动加 transition 类。
最易被忽略的一点：cubic-bezier 曲线在长时长（如 >0.5s）下容易显得拖沓，而短时长（cubic-bezier(0.4, 0, 0.2, 1) 是人眼感知最自然的区间。
