mask-image 动画不动是因为 mask-image 本身不可动画，需动画 mask-position 和 mask-size；正确做法是用 mask 简写配合渐变、合理 size 与 position 实现擦除效果。
mask-image 动画为什么不动？关键在 mask-position
直接用 mask-image 配合 @keyframes 动画时，图片纹丝不动——不是 mask 没生效，而是你没动 mask-position。CSS 的 mask-image 本身只是“贴图”，真正控制擦除区域位置的是 mask-position 和 mask-size。动画目标必须是这两个属性（或简写 mask），而非 mask-image 本身。
常见错误写法：
animation: wipe 3s;<br>@keyframes wipe {<br> from { mask-image: linear-gradient(90deg, black 50%, transparent 50%); }<br> to { mask-image: linear-gradient(90deg, transparent 50%, black 50%); }<br>}
——这毫无效果，mask-image 不支持过渡/动画。
- 正确做法：用渐变作为 mask 图层，固定大小，只移动它的位置
- 推荐使用
mask简写（含mask-image+mask-position+mask-size）方便统一控制 - 务必设
mask-repeat: no-repeat，否则位移会重复触发多次擦除
实现横向擦除的最小可行代码
以下代码让一张图片从左到右“被擦出”：
.erased-img {<br> mask-image: linear-gradient(90deg, black, black 50%, transparent 50%, transparent);<br> mask-size: 200% 100%;<br> mask-position: 100% 0;<br> mask-repeat: no-repeat;<br> animation: mask-wipe 2.5s ease-in-out forwards;<br>}<br><br>@keyframes mask-wipe {<br> to { mask-position: 0 0; }<br>}
说明：
-
linear-gradient(90deg, black, black 50%, transparent 50%, transparent)构成一个硬边过渡的左右分界线（黑→透明） -
mask-size: 200% 100%让这个渐变宽度是容器的两倍，确保初始时全黑区域完全覆盖图片 -
mask-position: 100% 0初始时把“透明区”完全放在右边外侧，整个图被黑区遮住 - 动画终点
mask-position: 0 0把渐变左移，让透明区逐步扫过图片
vertical 擦除、斜向擦除怎么改？看 mask-size 和起止 position
方向变化本质是调整渐变角度 + mask-position 移动轴向 + mask-size 扩展方向。不需要重写逻辑，只换参数：
- 竖向擦除：把
linear-gradient(90deg, ...)改成linear-gradient(0deg, ...)，mask-size改为100% 200%，mask-position动画从0 100%→0 0 - 对角擦除：用
linear-gradient(135deg, ...)，mask-size: 200% 200%，mask-position从100% 100%→0 0 - 注意：所有
mask-position值必须配合mask-size范围，否则位移无效（例如mask-size: 200% 100%时，mask-position: 200% 0就超出了可动范围）
兼容性与 fallback 方案
mask-image 在 Safari 和 Chrome 较新版本中稳定，但 Firefox 仍需 -webkit-mask-image 前缀（且仅支持部分值），Edge 已随 Chromium 统一。不支持时图片会完全显示（无遮罩），属于优雅降级。
- 必须加
-webkit-mask-image前缀才能在 Safari 15.4+ 正常工作 - Firefox 目前不支持
mask-position动画，若需全浏览器支持，得回退到clip-path动画（但无法实现软边/渐变擦除） - 移动端 iOS Safari 对
mask-size百分比计算偶有偏差，建议用具体像素值（如mask-size: 2000px 1000px）+mask-position: 2000px 0替代百分比
真正难的不是写对第一版动画，而是调准 mask 渐变的断点位置、size 缩放比例和 position 起止值——三者稍有错位，擦除就会跳变或残留黑边。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
