如何在Web Animations API中使用Chrome的-webkit-mask-image属性？

结论 #

这是Chrome浏览器对Web Animations API（WAAPI）处理带-webkit-前缀属性的兼容性问题，并非你遗漏了命名规范。

原因说明 #

Chrome中，WAAPI对部分带厂商前缀的CSS属性（比如-webkit-mask-image）的识别逻辑存在偏差：

• CSS动画中同时声明前缀和标准属性时，Chrome能正常解析并执行；
• 但WAAPI里，无论使用字符串形式的'-webkit-mask-image'还是驼峰式的webkitMaskImage，Chrome都无法正确关联到对应的前缀属性，导致动画不生效。而Safari和Firefox的WAAPI实现则能正确处理前缀属性的两种写法。

可行解决方案 #

方案1：使用CSS变量间接动画 #

通过CSS变量包装mask-image的值，WAAPI只需要动画这个变量，就能绕过Chrome的前缀识别问题，同时兼容所有浏览器：

修改后的代码示例：

<html>
<h1>Web animations API with vendor prefixed properties</h1>
<style>
img {
  margin: 0 50px;
  width: 300px;
  height: 300px;
}

.mask {
  -webkit-mask-position: 50px 50px;
  mask-position: 50px 50px;
  -webkit-mask-size: 200px 200px;
  mask-size: 200px 200px;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  /* 用CSS变量绑定mask-image */
  -webkit-mask-image: var(--mask-image);
  mask-image: var(--mask-image);
}

.mask-css {
  animation: mask_frames 1s infinite;
}

@keyframes mask_frames {
  0% {
    -webkit-mask-image: none;
    mask-image: none
  }
  100% {
    -webkit-mask-image: url(https://upload.wikimedia.org/wikipedia/commons/c/c8/Black_Star.svg);
    mask-image: url(https://upload.wikimedia.org/wikipedia/commons/c/c8/Black_Star.svg);
  }
}
</style>

<!-- CSS3 animation -->
<div class='container'>
  <img class="mask mask-css" src="https://services.google.com/fh/files/misc/color_grey.jpg">

  <!-- JS animation, now works in Chrome -->
  <img class="mask mask-js" src="https://services.google.com/fh/files/misc/color_grey.jpg">

  <!-- No animation for refernce -->
  <img class="no-mask" src="https://services.google.com/fh/files/misc/color_grey.jpg">
</div>
<script>
let elt = document.getElementsByClassName('mask-js')[0],
    url = 'url(https://upload.wikimedia.org/wikipedia/commons/c/c8/Black_Star.svg)';

// 动画CSS变量，兼容所有浏览器
elt.animate([
  { '--mask-image': 'none' },
  { '--mask-image': url }
], { duration: 1000, iterations: Infinity });
</script>
</html>

方案2：浏览器特性检测+降级处理 #

如果必须直接操作mask-image，可以通过特性检测判断Chrome环境，然后切换到CSS动画实现：

const isChrome = /Chrome/.test(navigator.userAgent) && /Google Inc/.test(navigator.vendor);
const elt = document.querySelector('.mask-js');
const url = 'url(https://upload.wikimedia.org/wikipedia/commons/c/c8/Black_Star.svg)';

if (isChrome) {
  // Chrome下用CSS动画
  elt.classList.add('mask-css');
} else {
  // 其他浏览器用WAAPI
  elt.animate([
    { maskImage: 'none' },
    { maskImage: url }
  ], { duration: 1000, iterations: Infinity });
}

补充说明 #

这类问题属于浏览器实现细节差异，目前Chrome的WAAPI对前缀属性的支持还不完善，相关兼容性问题在浏览器开发者社区已有讨论，但尚未完全修复。使用CSS变量的方案是目前最简洁且跨浏览器兼容的解决方式。

内容的提问来源于stack exchange，提问作者patricksurry