mix-blend-mode: difference 无法实现文字颜色随背景深浅的平滑过渡，因其是离散枚举值，不支持插值动画，浏览器会静默忽略 transition 声明；必须改用 background-color 和 color 分别加 transition 显式控制。
mix-blend-mode: difference 不能实现文字与背景的反色过渡——它压根不支持过渡，加 transition: mix-blend-mode 完全无效，浏览器会静默忽略。
为什么 transition 对 mix-blend-mode: difference 无效
CSS 规范明确将 mix-blend-mode 列为**不可动画属性**（non-animatable）。它的取值是离散关键字（normal、difference、multiply 等），没有中间状态可插值。所谓“过渡”，在视觉上只能是开或关的突变。
- 给
mix-blend-mode加transition不会报错，但也不会有任何动画效果 - 背景用
linear-gradient或background-color过渡时，文字颜色不会平滑变化，而是每帧重新计算差值：比如背景从#fff→#888→#000，文字#000会依次变成#fff→#777→#000，中间灰阶严重糊边、对比度崩盘 - 滚动或缩放中常出现文字“闪一下才反色”，这是渲染重排节奏不一致导致的，不是性能问题
真正能过渡的写法：分离控制 background-color 和 color
想获得“背景变深 → 文字变亮”的缓动效果，必须放弃 mix-blend-mode 的“自动”幻想，改用可插值的双变量显式控制：
-
background-color和color必须写在同一选择器里，且都声明transition - 用 CSS 自定义属性组织逻辑，但过渡生效靠的是属性本身，不是变量名
- hover / media query / JS 主动切换时，要同时更新两个属性值，不能只改变量
button {
--bg: #f0f0f0;
--text: #000;
background-color: var(--bg);
color: var(--text);
transition: background-color 0.3s, color 0.3s;
}
button:hover {
--bg: #222;
--text: #fff;
background-color: var(--bg);
color: var(--text);
}
mix-blend-mode 在编辑器/动态背景中的实际陷阱
在富文本编辑器（contenteditable）或用户上传背景图场景下，mix-blend-mode: difference 更容易失效：
立即学习“前端免费学习笔记（深入）”；
- 编辑器 DOM 嵌套深，某层
opacity: 0.99或filter: blur(0)就会隐式创建 stacking context，切断混合链路 - 图片背景 +
mix-blend-mode易出边缘噪点、光晕、局部失色，尤其在 Safari iOS 15.4+ 上滚动时闪烁 - 渐变背景不同位置色值不同，文字同一像素会跟多个背景值算差值，产生横向色带
- 中灰背景（如
#808080）下#ffffff输出#7f7f7f，对比度仅约 1.05:1，WCAG AA 直接不达标
真正难处理的不是怎么写，而是怎么确保混合上下文不被隐式打断——哪怕只是给父容器加了个 will-change: transform，都可能让整个效果在 Safari 上消失。动手前务必用 DevTools 检查 computed styles 中的 isolation 和 transform-style 状态，而不是只看源码有没有写 isolation: isolate。
