mix-blend-mode 不可动画，因其为非可动画属性，取值为离散关键字，无法插值；应改用 background-color 和 color 双变量过渡，或通过 opacity 动画间接模拟混合效果。
mix-blend-mode 本身不能实现动态色彩过渡——它不是可动画属性，加 transition: mix-blend-mode 或 @keyframes 会静默失效，浏览器 DevTools 会标黄警告“transition ignored”。
为什么 mix-blend-mode 加 transition 没反应
CSS 规范明确将 mix-blend-mode 列为**非可动画属性（non-animatable）**。它的取值（如 difference、multiply）是离散关键字，没有中间状态可插值。浏览器没法计算 “multiply 的 70% + screen 的 30%” 是什么——数学上不成立。
常见错误现象包括：
- 写了
transition: mix-blend-mode 0.3s却完全没动画，控制台无报错 - 用 JS 定时切换 class 改变
mix-blend-mode值，视觉仍是突变而非缓动 - 滚动或缩放中文字“闪一下才反色”，本质是渲染重排节奏不一致，不是性能问题
真正能过渡的写法：用 background-color 和 color 分别控制
想获得“背景变深 → 文字变亮”的平滑效果，必须放弃 mix-blend-mode: difference 的“自动”幻想，改用可插值的双变量显式控制。
立即学习“前端免费学习笔记（深入）”；
关键实操要点：
-
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);
}
用 opacity 动画间接模拟混合动效
这是最轻量、兼容性最好的方案：固定 mix-blend-mode，只动 opacity。
适用场景：
- 前景层设
mix-blend-mode: overlay+opacity: 0 → 1动画，视觉上就像“混合效果慢慢浮现” - 需“淡出旧模式、淡入新模式”时，可用两个重叠层：一层
opacity: 1（当前模式），另一层opacity: 0（目标模式），动画中反向过渡 - 注意避免给混合元素加
will-change: transform，它会强制创建新层叠上下文，切断混合链路
示例：
.blend-layer {
mix-blend-mode: overlay;
opacity: 0;
transition: opacity 0.4s ease-out;
}
.blend-layer.active {
opacity: 1;
}
图片混合过渡的陷阱与绕过方案
mix-blend-mode 对 <img> 直接加通常无效，因为图片默认没有“背后内容”可混；父容器若触发新层叠上下文（如 opacity: 0.99、transform、isolation: isolate），混合链路会被隐式切断。
可行路径：
- 把图片放进有颜色/渐变背景的容器里，再让图片自身参与混合
- 用伪元素
::before叠加单色层，设mix-blend-mode，图片当 backdrop - 若图片是
background-image，改用background-blend-mode+background-position或background-size动画制造动态错觉 - iOS Safari（尤其 14–15）在动画中切
mix-blend-mode值极易失效，务必改用固定模式 + 动态调background-color或opacity
复杂点在于：混合效果是否生效，不取决于你写了什么值，而取决于当前 DOM 结构是否满足三个硬性条件——视觉重叠、同层叠上下文、背后有可混合内容。任何一环断裂，mix-blend-mode 就只是个被忽略的声明。
