mask-position 动态变化无效是因为旧规范将其列为不可动画属性，chrome 115+/safari 16.4+ 才支持，firefox 仍不支持；应改用 mask-image 配合 css 变量和 background-position 模拟动画。
mask-position 动态变化为什么没反应？
直接对 mask-position 加 transition 或 @keyframes 通常无效——CSS 遮罩位置本身不支持过渡动画，除非你用的是 mask-image 配合 linear-gradient 这类可计算的图像值，且浏览器明确支持该属性的动画（Chrome 115+、Safari 16.4+ 支持，Firefox 仍不支持）。
- 常见错误：写
transition: mask-position 0.3s，但实际无任何变化 - 根本原因：旧版 CSS Masking 规范中
mask-position被列为「non-animatable」，直到 2023 年才在新规范中改为「animatable」，但实现滞后 - 绕过方式：改用
mask-image中的渐变偏移量（如background-position思路），把动画逻辑转移到可动属性上
用 CSS 变量 + background-position 模拟 mask-position 动画
核心思路是：不用 mask-position，而用 mask-image: linear-gradient() 配合 background 同构写法，把位移控制权交给 --mask-x 这类自定义变量，并绑定到 background-position（它天然支持 transition 和 animation）。
.text-mask {
--mask-x: -100%;
-webkit-mask-image: linear-gradient(90deg, black 0%, black 50%, transparent 50%, transparent 100%);
mask-image: linear-gradient(90deg, black 0%, black 50%, transparent 50%, transparent 100%);
-webkit-mask-size: 200% 100%;
mask-size: 200% 100%;
-webkit-mask-position: var(--mask-x) 0;
mask-position: var(--mask-x) 0;
transition: --mask-x 0.6s ease-in-out;
}
- 关键点：
mask-size: 200% 100%才能让--mask-x从-100%到0%实现完整滑入效果 - 必须同时写
-webkit-mask-*和标准属性，否则 Safari 16.4 之前会失效 - 变量名要用
--mask-x而非mask-x，否则无法被transition捕获（CSS 变量动画依赖transition显式声明变量名）
JavaScript 动态更新 mask 位置时要注意什么？
如果需要响应滚动、鼠标移动或按钮点击来实时控制遮罩位置，不能直接操作 style.maskPosition，而应更新 CSS 变量值——这是唯一可靠且可动画的方式。
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
const el = document.querySelector('.text-mask');
el.style.setProperty('--mask-x', '-50%');
- 避免用
el.style.maskPosition = '50% 0'：这会覆盖掉mask-position: var(--mask-x)，导致变量失效 - 若需频繁更新（如跟随鼠标），建议用
requestAnimationFrame节流，否则在低端设备上容易卡顿 - 注意单位一致性：CSS 变量里传
'-50%'，不要传数字-50，否则计算会出错
兼容性兜底和 Safari 特别处理
Safari 对 mask-image 的支持比 Chrome 更早，但对变量动画的支持晚半年左右；iOS 16.4 是分水岭版本。低于此版本，transition on CSS variables 不生效，需降级为 JS 驱动的 animation 帧循环。
- 检测方式：可用
CSS.supports('transition', '--mask-x 0.3s')判断是否支持变量过渡 - Safari 16.3 及更早：只能用
el.animate([{ '--mask-x': '-100%' }, { '--mask-x': '0%' }], { duration: 600 })（需 polyfillElement.prototype.animate） - Firefox 当前（128）完全不支持
mask-image动画，建议用-webkit-mask+@supports (mask-image: none)隐藏动画逻辑，降级为静态遮罩
真正麻烦的不是写法，而是不同浏览器对「同一个变量能否被 transition 捕获」的判断逻辑不一致——哪怕都支持 mask-image，也可能一个动一个不动。动手前先查 caniuse 上 css-masking 和 css-custom-properties 两栏的交叉支持状态。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
