blend-mode 本身不支持 transition
直接对 blend-mode 写 transition: blend-mode 0.3s 是无效的——浏览器根本不响应这个属性的过渡。你看到的“没变化”或“突变”，不是写法错了，是它压根不在 CSS 可动画属性列表里（MDN 动画属性清单里查不到它）。
常见错误现象：transition 写了但毫无过渡效果，hover 后立刻切换，控制台也没报错，让人误以为是缓动时间太短或选择器没命中。
- 真正能触发视觉混合变化的，只有靠间接手段：比如用
opacity、background-color的 alpha 通道、或filter: opacity()来“模拟”混合强度变化 - 如果必须让底层图层和上层图层之间产生渐进式混合感，得靠两层重叠 + 控制其中一层的透明度来实现近似效果
- 某些混合模式（如
multiply、screen）对透明度敏感，改opacity会明显影响最终叠加色，而overlay或hard-light则更依赖亮度对比，效果更难预测
用 opacity + mix-blend-mode 实现类过渡效果
这是目前最稳定、兼容性最好（Chrome 45+、Firefox 32+、Safari 8+）的 workaround。原理是保持 mix-blend-mode 固定，只对参与混合的某个图层做 opacity 过渡，让混合结果“看起来”在渐变。
使用场景：文字浮于图片上方并随悬停变透、卡片遮罩层淡入时混合效果渐显、UI 元素叠加高斯模糊背景时柔化边缘。
立即学习“前端免费学习笔记（深入）”；
.layer {
mix-blend-mode: multiply;
transition: opacity 0.4s ease;
}
.layer:hover {
opacity: 0.7;
}
- 注意：不能对父容器设
mix-blend-mode然后只调子元素opacity——混合发生在兄弟/同层元素之间，层级关系错就完全不出效果 - 如果混合对象是伪元素（如
::before），确保它和背景内容处于同一 stacking context，否则可能被隔离导致混合失效 -
opacity过渡会连带影响整个元素的可访问性（如文本对比度下降），需同步检查 WCAG 要求
filter: opacity() 和 background-color rgba() 的替代路径
当 opacity 不适用（比如要保留子元素交互能力），可以考虑用 filter: opacity() 替代——它不影响子元素 pointer-events，但注意它会触发硬件加速，可能在低端设备上引发闪烁或性能抖动。
另一个方向是把混合逻辑“前置”到背景上：用 background-color: rgba(255, 0, 100, 0.3) 替代纯色 + mix-blend-mode，再对 background-color 做 transition。这种方式绕开了混合模式限制，但只适用于颜色叠加，不适用于图像或复杂图层混合。
-
filter: opacity()在 Safari 中对 transform 层叠有已知 bug，hover 时可能跳帧 - 用
rgba()模拟screen混合？不行——数学上不可逆，只能逼近，且无法还原原始图像纹理信息 - 若用
background-blend-mode（作用于多背景图层），它本身也不支持 transition，但多个background-image的opacity无法单独控制，这条路基本走不通
JS 强制重绘监听 blend-mode 变化不现实
有人想用 MutationObserver 监听 style 变更，再手动插帧修改 blend-mode 值——这不仅没意义，还极容易出错。因为 blend-mode 是离散值（normal / multiply / screen…），没有中间态，强行插帧只会造成卡顿或白屏（尤其在 canvas 或 WebGL 上下文中）。
真正需要精细控制混合过程的场景（如视频滤镜、实时图形合成），应该交给 WebGL 或 Canvas 2D + globalCompositeOperation，而不是硬拖 CSS。
- CSS
mix-blend-mode是声明式、GPU 加速的，但设计之初就没考虑动态插值 - 试图用 JS “骗过”浏览器做 blend-mode 过渡，大概率换来的是 layout thrashing 和内存泄漏
- 如果你正在调试一个看似“混合过渡成功”的 demo，大概率是它同时改了
opacity或transform，误把其他动画当成了 blend-mode 的功劳
opacity: 0.99、transform、filter 都会让元素新建 stacking context，从而切断 mix-blend-mode 的作用链。这点比选什么过渡方式还关键。 
