mix-blend-mode 不支持直接动画，因其为离散属性；需通过动画 opacity、位置、颜色等影响混合效果的输入条件来模拟动态混合。
mix-blend-mode 本身不支持 CSS 动画过渡
直接对 mix-blend-mode 设置 transition 或用 @keyframes 动画切换值，浏览器会忽略——它是个**离散型属性**，没有中间状态。你看到的“切换”只是瞬间生效，不是平滑过渡。
想实现混合模式的动态效果，得绕开属性本身
真正可动画的是混合所依赖的「输入条件」：比如前景元素的位置、透明度、颜色、或背景内容的变化。只要这些变化能影响混合结果的视觉表现，就能伪造出“混合在动”的效果。
-
位移 + difference：文字在渐变背景上水平移动，
mix-blend-mode: difference会让它实时反色，产生“自动适配底色”的流动感 -
opacity 动画：对带
multiply的图层做opacity: 0 → 1，混合强度随之线性变化（注意：opacity isolation: isolate） -
color 或 background-color 动画：比如给一个
overlay模式下的纯色块渐变换色，它和下方图片的叠加对比会持续变化
常见失效点：stacking context 中断动画中的混合
一旦父容器用了 transform、filter、will-change 或 opacity: 0.99，就会切出独立 stacking context，子元素的 mix-blend-mode 只跟这个新 context 的背景混合，而不是你想要的页面底层内容。
- 动画前先检查 DOM 层级是否被意外隔离
- 关键修复手段是给动画元素或其最近共同父容器加
isolation: isolate - 避免在动画中动态增删
filter，它比transform更容易触发 context 切断
difference 模式最适配动画，但别滥用
mix-blend-mode: difference 对颜色差值敏感，哪怕背景是轻微渐变或滚动视差，文字都会实时翻转，视觉反馈极强。但它有个硬伤：在彩色复杂背景下，反色后文字可能变成难以辨识的灰紫/黄绿杂色。
- 只建议用于黑白主调、或背景色域可控的场景（如深灰→浅灰线性渐变）
- 上线前务必在真机上测试，iOS Safari 对
difference的 sRGB 渲染和桌面 Chrome 有细微差异 - 不要用它做长段落正文——人眼无法持续追踪高频反色切换
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
