mix-blend-mode 不支持过渡动画，因其取值为离散关键字，无中间状态，加 transition 无效；应改用 background-color 和 color 同步过渡模拟混合效果。
不能用 mix-blend-mode 实现“过渡动画”——它不支持插值，加 transition: mix-blend-mode 完全无效，视觉上只会突变。
为什么 mix-blend-mode 加 transition 没反应
浏览器规范明确禁止对 mix-blend-mode 做 CSS 过渡：它的取值（normal、multiply、difference 等）全是离散关键字，没有中间状态。哪怕你写 transition: mix-blend-mode 0.3s，所有浏览器都会静默忽略。
- 现象：hover 时文字“啪”一下变镂空，或根本不变，控制台无报错，computed style 显示属性已设但没混合效果
- 根源不是写法错，而是数学上不存在“50% multiply”这种状态——混合是每帧重算的像素级操作，不参与 CSS 动画时间轴
- 试图用 JS 定时切换
mix-blend-mode值（如从normal到multiply），结果仍是两帧突变，毫无缓动
真正能动的替代方案：用 background-color 和 color 分开过渡
想让文字“从实色渐变成镂空感”，必须放弃“自动混合”的幻想，改用可插值、可预测的双变量控制。核心是让文字颜色和背景色同步变化，模拟出混合效果的视觉渐变。
- 文字元素需有纯色背景（如
background-color: black）和高对比度文字色（如color: white） - 在 hover 或动画中，同时降低背景色透明度（或变浅）+ 提升文字色亮度，并给这两个属性加
transition - 例如：背景从
black→rgba(0,0,0,0.1)，文字从white→rgba(255,255,255,0.2)，就能模拟出“逐渐透出底层图”的过程 - 关键点：
background-color和color必须在同一选择器里声明，且 hover 中显式重写，否则 transition 不触发
移动端和富文本编辑器里 mix-blend-mode 失效的常见原因
即使你只想要静态镂空（不加动画），在真实项目中也常失败——这不是代码问题，而是层叠上下文被意外切断。
- 父容器只要带
opacity: 0.99、transform: translateZ(0)、backdrop-filter或甚至position: relative; z-index: 1，就会创建新 stacking context，导致文字只能跟“一层透明底”混合，结果全黑/全白 - 解决方案：在文字元素的**直接父容器**上加
isolation: isolate（不能加在 body 或 wrapper 上） - 避免嵌套过深：富文本编辑器（
contenteditable）里 DOM 层级常超 5 层，某层带filter: blur(0)就会隐式隔离，建议把镂空文字抽到编辑器外层绝对定位 - 移动端慎用
difference：Safari iOS 15.4+ 滚动时易闪，推荐用screen（黑变透明）或overlay（自适应）
真正难的不是写出那几行 mix-blend-mode，而是判断什么时候该彻底放弃它——尤其当需求里出现“过渡”“渐变”“滚动中稳定”这些词时，mix-blend-mode 就不再是解法，而是陷阱本身。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
