Chrome 112+ 才真正支持 mask-image 动画，Firefox 和 Safari 支持极差；需用 mask-size + mask-position 实现扫光效果，渐变遮罩透明度须为 0→1→0，且容器必须有显式尺寸。
mask-image 动画在 Chrome 112+ 才真正可用
Firefox 和 Safari 对 mask-image 的动画支持极差——Safari 完全不支持 @keyframes 中的 mask-image 变更，Firefox 则常出现闪烁或卡顿。实际项目中若需兼容，得先用 caniuse.com 查 mask-image animation 状态，当前仅 Chromium 内核（Chrome、Edge、新版 Opera）能稳定跑通。
常见错误现象：mask-image: linear-gradient(...) 写进 @keyframes 后动画无反应，其实是浏览器直接忽略该属性变更，而非代码写错。
- 必须用
mask-image配合mask-size+mask-position实现“扫光”，不能靠mask-image自身变化 - 遮罩图层必须是渐变（
linear-gradient），且透明度从 0 → 1 → 0，否则扫光会漏底或不连续 - 动画时长建议 ≥ 2s，太快会导致视觉残留弱、扫光感不明显
扫光遮罩的核心 CSS 写法
关键不是“给图片加 mask”，而是让 mask 的位置随时间移动，制造光线划过效果。本质是固定一个宽高远超容器的渐变遮罩，再用 mask-position 水平平移它。
.glare {
mask-image: linear-gradient(
90deg,
transparent,
rgba(0,0,0,1),
transparent
);
mask-size: 200% 100%;
mask-position: -100% 0;
animation: shine 3s infinite;
}
<p>@keyframes shine {
to {
mask-position: 100% 0;
}
}注意三点：
立即学习“前端免费学习笔记（深入）”；
-
mask-size: 200% 100%是必须的——让渐变宽度翻倍，保证从左外侧进入、右外侧离开 -
mask-position起始设为-100% 0，终点设为100% 0，才能完整扫过整个区域 - 不要用
mask-repeat，它对线性渐变无效；也不要尝试用mask-composite，目前无实际作用
图片容器必须设 background 或 img src 且不可省略尺寸
如果只写 <div class="glare"></div> 并期望它自动撑开，动画不会生效——mask-image 依赖渲染盒模型，空容器高度为 0，mask 无处可施。
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
正确做法二选一：
- 用
<img>标签：确保src存在，且父容器或自身设width/height（或aspect-ratio） - 用背景图：
background: url(...) no-repeat; background-size: cover;，同时设width和height
容易踩的坑：object-fit: cover 在 <img> 上有效，但若父容器没显式尺寸，mask-position 仍会计算失准——最终扫光轨迹偏移或卡在半途。
移动端性能与 fallback 处理
在 iOS Safari 上，即使加了 -webkit-mask-image 前缀，动画仍大概率被降帧或禁用。实测中，开启 will-change: mask-position 可小幅提升流畅度，但代价是内存占用上升。
更稳妥的做法是检测支持并降级：
@supports (mask-image: linear-gradient()) {
.glare { /* 启用 mask 动画 */ }
}
@supports not (mask-image: linear-gradient()) {
.glare::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
animation: legacy-shine 3s infinite;
}
}复杂点在于：CSS mask 动画无法和 backdrop-filter、filter 等叠加使用，一旦图片本身有模糊或色偏，遮罩边缘可能发虚——这时只能切回 SVG mask 或 JS 控制 canvas 绘制，但那就不是纯 CSS 方案了。
