mix-blend-mode本身不能做转场动画，因其是离散枚举值，无法线性插值，浏览器规范明确将其列为非可动画属性，transition或@keyframes均无效；可行方案是固定mix-blend-mode，通过opacity、background-color、transform等可动画属性间接模拟混合动效。
mix-blend-mode 本身不能做转场动画——浏览器根本不支持对它做过渡或关键帧插值，写 transition: mix-blend-mode 0.3s 会被静默忽略，DevTools 还会标黄警告「transition ignored」。
这不是你代码写错了，是 CSS 规范明确把它列为**非可动画属性**。所有主流浏览器（Chrome/Firefox/Safari）都如此，没例外。
真正能动的，是你控制混合效果的“输入”，而不是混合模式本身。
为什么 mix-blend-mode 动不了？
mix-blend-mode 的取值（如 multiply、screen、overlay）是离散枚举值，不是连续数字，无法线性插值。浏览器没法算出 “multiply 的 60% + screen 的 40%” 是什么——数学上不成立。
常见错误现象：
- 写了
transition: mix-blend-mode 0.3s却毫无变化，控制台无报错 - 用
@keyframes尝试从multiply到overlay，结果仍是瞬间跳变 - JS 定时切换 class 改
mix-blend-mode，视觉上还是卡顿切换，没有“流动感”
用 opacity 动画模拟 blend-mode 转场
这是最轻量、兼容性最好的间接方案：固定 mix-blend-mode，只动 opacity。
- 前景层设
mix-blend-mode: overlay+opacity: 0→opacity: 1动画，视觉上就像“混合效果慢慢浮现” - 若需“淡出旧模式、淡入新模式”，可用两个重叠层：一层
opacity: 1（当前模式），另一层opacity: 0（目标模式），动画中反向过渡 - 注意：opacity transform、
filter或will-change
示例：
立即学习“前端免费学习笔记（深入）”；
.blend-layer {
mix-blend-mode: overlay;
opacity: 0;
transition: opacity 0.4s ease-out;
}
.blend-layer.active {
opacity: 1;
}
用 background-color 或 background-image 动画替代 blend-mode 切换
把混合逻辑“前置”到背景上，绕过 mix-blend-mode 动画限制。
- 不用
mix-blend-mode: multiply+ 纯色背景，改用background-color: rgba(255, 0, 100, 0.3)，再对background-color做transition - 多背景叠加场景（如图+渐变），用
background-blend-mode+background-position或background-size动画，制造动态混合错觉 - 慎用
background-image: linear-gradient()动画——CSS 不原生支持渐变动画，需靠background-position模拟，或 JS 控制stop-color变化
stacking context 是隐藏杀手
即使你用了 opacity 或 transform 动画，mix-blend-mode 仍可能失效——大概率是被某层祖先无意创建了新层叠上下文。
- 检查父级是否加了
transform: translateZ(0)、filter: blur(1px)、opacity: 0.99或will-change: transform - 这些都会隐式创建 stacking context，把子元素“锁死”，使其无法和更外层背景混合
- 临时调试：给可疑父容器加
isolation: isolate，如果混合突然恢复，说明就是它截断了混合链 - Safari 对
mix-blend-mode+will-change组合支持不稳定，动画中尽量避免同时启用
mix-blend-mode 的转场本质是“骗眼睛”：不动模式，动它的输入源。最容易被忽略的是 stacking context 的隐式创建——它不会报错，也不会提示，只会让混合效果凭空消失。 
