mask-position 光影动画失败主因是未设 display:inline-block/block、漏 -webkit-mask-image 前缀、渐变中点非 #000；须显式设 mask-size:200% 100%、mask-position:-100% 0→200% 0，文字色透明，firefox 不支持需降级。
直接用 mask-position 做光影掠过文字，90% 的失败不是代码写错，而是漏了三件事：文字没设 display: inline-block 或 block、没配 -webkit-mask-image 前缀、渐变里中间色没用纯黑 #000。
为什么 mask-position 动画不动或只闪一下
根本原因是遮罩图“没空间可动”——浏览器默认把 mask-image 拉满整个元素尺寸（mask-size: border-box），又设了 mask-repeat: no-repeat，mask-position 再怎么改都卡在原地。
- 必须显式写
-webkit-mask-size: 200% 100%和mask-size: 200% 100%，横向留出一倍位移余量 -
mask-position起始值不能依赖默认的0% 0%，得手动设成-100% 0，终点设为200% 0，确保光条完整扫过整段文字 - 别用
infinite循环动画，两次扫光之间有停顿感；真要循环，加animation-delay或用 JS 控制animation-play-state
文字不显示光影，只显示纯黑/空白
这不是 mask 没生效，是文字本身盖住了背景。CSS 遮罩只控制“哪里能透”，不负责让文字变透明。
- 必须同时写
color: transparent和-webkit-text-fill-color: transparent——Safari 和旧版 Chrome 不认前者，只靠后者会丢字 - 文字容器必须是
display: inline-block或block；inline元素在 WebKit 下 mask 渲染边界不可靠，尤其中文易被折行截断 - 父容器不能有
overflow: hidden，否则光条移出范围时会被裁掉，看起来像“突然消失”
Firefox 下完全没效果
截至 2026 年 6 月，Firefox 仍不支持 mask-image 动画，@supports (mask-image: none) 会直接跳过整段规则。
- 用
@supports (-webkit-mask-image: none)包裹核心样式，不支持时降级到text-shadow动画（比如模拟高光边缘） - 避免在滚动区域或长列表里批量使用——mask 是 GPU 加速，但内存开销大，单页超过 5 处易触发渲染抖动
- 别在
:hover里动态加 mask 样式，首次触发有明显延迟；预定义好动画，用animation-play-state: paused+ hover 时play
真正难的不是写对那几行 CSS，而是判断什么时候该用 mask-position、什么时候该换 background-position + background-clip: text——前者适合硬边扫光，后者更适合柔光流动；混用或强行降级，反而更容易露馅。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
