mask-image 动画不动是因为默认 mask-repeat: no-repeat 且 mask-size: border-box，无位移空间；需显式设置 repeat 或增大 mask-size 并动画 mask-position。
mask-image 动画为什么不动？关键在 mask-repeat 和 mask-size
直接用 mask-image 配合 animation 位移，大概率没反应——不是写法错，是默认行为锁死了。浏览器对 mask-image 的处理和 background-image 不同：mask-image 默认不平铺（mask-repeat: no-repeat），且默认尺寸是「覆盖整个元素」（mask-size: border-box），位移根本没空间可动。
- 必须显式设
mask-repeat: repeat或mask-repeat: no-repeat+mask-size大于容器宽高，留出位移余量 - 推荐用
mask-size: 200% 100%+mask-position: 100% 0起始，再动画mask-position到0 0 - 遮罩图本身要是横向有渐变或图案的 PNG/SVG，纯黑纯白图位移看不出效果
SVG mask vs. CSS mask-image：哪个更适合文字擦除？
用内联 SVG 的 <mask></mask> 元素能精细控制 alpha 通道，但动画要靠 transform 移动 <rect></rect> 或 <lineargradient></lineargradient>，兼容性差（Safari 对 SVG mask 动画支持不稳定）；而 mask-image 是 CSS 原生属性，动画更轻量，但只接受图片/渐变值，不能用 SVG 元素逻辑。
- 简单线性擦除（左→右、上→下）：用
mask-image: linear-gradient(...)最稳 - 需要波浪、锯齿、多段遮罩：只能上 SVG mask，但得加
@supports (mask-image: none)降级 - Firefox 目前不支持
mask-image动画，必须用-webkit-mask-image并加mask-composite兜底
文字被“擦掉”后背景露不出来？检查 mask-mode 和 color
常见现象：动画跑起来，文字变透明了，但底下背景还是白的——不是遮罩没生效，是文字本身颜色盖住了。CSS mask 只控制可见区域，不改变文字颜色或背景层叠顺序。
- 确保父容器有真实背景（比如
background: #333），而不是依赖 body 默认色 - 文字元素需设
color: transparent，否则文字色会覆盖遮罩透出的背景 - 如果用了
mask-mode: alpha（默认），遮罩图的灰度值决定透明度；若想硬切（全透/不透），遮罩图得是纯黑白，别带灰阶 -
mask-composite: add在多层遮罩时影响合成方式，一般擦除场景保持默认即可
性能卡顿或闪屏？避免 layout 触发和强制重绘
用 mask-position 动画比用 transform 便宜，但它仍可能触发重排（尤其在旧版 Chrome）。真正流畅的做法是把遮罩层抽成伪元素，文字本体不动。
立即学习“前端免费学习笔记（深入）”；
- 不要直接在
<h1></h1>上设mask-image动画，改用::before覆盖一层遮罩层 - 给遮罩层加
will-change: mask-position（仅动画期间），但别滥用，会吃内存 - 避免同时动画
mask-position和opacity，叠加触发多重合成层 - 移动端 Safari 对
mask-image动画掉帧明显，可降级为clip-path线性裁剪（兼容性更好，但无法做渐变擦除）
最易忽略的是遮罩图分辨率和设备像素比——一张 100×100 的 PNG 在 Retina 屏上会模糊拉伸，导致擦除边缘发虚。要么用 SVG 作为 mask-image 源，要么用 image-set() 提供多倍图。
