mask-position 动画无效的根本原因是 mask-image 默认 no-repeat 且 mask-size: border-box 导致无位移余量，需显式设 repeat 或放大 mask-size 并配合 color: transparent 和渐变遮罩才能生效。
直接用 mask-image 配合 mask-position 动画，大概率没反应——不是写法错，是浏览器默认行为锁死了位移空间。
为什么 mask-position 动画不动？
因为 mask-image 默认 mask-repeat: no-repeat 且 mask-size: border-box，遮罩图被拉满贴合元素，mask-position 再怎么变也没余量可动。
- 必须显式设置
mask-repeat: repeat，或保持no-repeat但把mask-size放大（如200% 100%） - 起始
mask-position要设在“可视区外”，比如左擦除就从100% 0开始，再动画到0 0 - 遮罩源得有渐变/图案，纯黑纯白 PNG 位移也看不出变化
用 linear-gradient 做 mask-image 最稳
比加载 PNG 或 SVG 更轻、更可控，也规避了 Firefox 对 mask-image 动画的不支持（它至今不认原生 mask-image 动画，得靠 -webkit-mask-image + mask-composite 兜底）。
- 写法示例：
mask-image: linear-gradient(90deg, transparent 0%, black 50%, transparent 100%) - 方向决定擦除方向：90deg 是左→右，180deg 是上→下
- 中间黑带宽度控制“擦除刃”的粗细，太窄会像划线，太宽像块状覆盖
文字本体必须设 color: transparent
否则遮罩生效了，文字颜色仍盖在上面，背景透不出来——mask 只裁区域，不改叠层顺序。
- 父容器要有真实背景色，别依赖
body默认白底 - 如果用了
mask-mode: alpha（默认值），遮罩图灰度值决定透明度；想硬切（全透/不透），遮罩图必须是纯黑白，不能带灰阶 - 多层遮罩时注意
mask-composite合成逻辑，擦除场景一般保持默认即可
性能卡顿？优先抽成伪元素
mask-position 动画仍可能触发重排（尤其旧版 Chrome），真正流畅的做法是把遮罩层抽到 ::before 或 ::after，文字本体不动，只动伪元素。
- 避免在文字元素上同时写
transform和mask-position，容易触发 layout - 加
will-change: mask-position提示合成，但别滥用，只在必要动画元素上加 - Firefox 用户看到的是降级效果，得提前用
@supports (mask-image: none)做 fallback
最易被忽略的点：动画是否生效，和你写的 keyframes 无关，而取决于 mask-size 是否留出位移余量、mask-image 是否含有效渐变结构、以及文字本身有没有被 color: transparent 正确“让出”显示权。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
