如何让SVG遮罩的CSS动画在Firefox中正常生效？

我帮你分析并解决这个跨浏览器兼容性问题：

问题根源 #

你遇到的情况是Firefox对SVG遮罩（<mask>）内部元素的CSS transform动画支持存在特殊限制——虽然普通SVG元素的CSS动画能正常运行，但遮罩上下文里的元素无法正确应用CSS变换动画。这不是前缀的问题，而是Firefox在处理遮罩元素的CSS动画时，渲染逻辑和Chrome存在差异导致的。

推荐解决方案：改用SVG原生动画 #

SVG原生动画是标准的一部分，在Chrome和Firefox中对遮罩这类特殊上下文的支持更一致。我们可以用<animateTransform>代替CSS动画来实现缩放效果，代码修改如下：

调整后的CSS（移除原动画相关样式）

.canvas { border: solid 1px lime; background: lightblue; }
/* 原来的.animated类和@keyframes可以去掉了 */

修改后的HTML（给遮罩内的圆形添加SVG原生动画）

<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<center>
<div>
<svg class="canvas" viewBox="0 0 100 100" width="150px" height="150px">
<defs>
<mask id="gmask" fill="white">
<rect x="0" y="0" width="100" height="100" fill="white" />
<circle id="maskCircle" cx="50" cy="50" r="25" fill="black">
  <!-- SVG原生缩放动画：从scale(0)到scale(0.8)，持续1秒，结束后保持最终状态 -->
  <animateTransform
    attributeName="transform"
    type="scale"
    from="0"
    to="0.8"
    dur="1s"
    calcMode="spline"
    keySplines="0.25 0.1 0.25 1" /* 对应ease曲线 */
    fill="freeze"
  />
</circle>
</mask>
</defs>
<!-- 粉色圆形的CSS动画可以保留，也可以换成SVG动画 -->
<circle id="testCircle" class="animated" cx="50" cy="50" r="50" fill="pink" />
<circle id="outerCircle" class="outer" cx="50" cy="50" r="25" mask="url(#gmask)" />
</svg>
</div>
</center>
</body>
</html>

备选方案：用容器包裹遮罩元素再应用CSS动画 #

如果你坚持想用CSS动画，可以尝试把遮罩内的圆形放到<g>标签里，给这个容器加动画类，部分Firefox版本可能能正常识别：

<mask id="gmask" fill="white">
<rect x="0" y="0" width="100" height="100" fill="white" />
<g class="animated">
  <circle id="maskCircle" cx="50" cy="50" r="25" fill="black" />
</g>
</mask>

CSS保持你原来的代码不变，但这个方法的兼容性不如SVG原生动画稳定，优先推荐第一种方案。

为什么会这样？ #

CSS动画在SVG元素上的支持是浏览器逐步实现的，对于遮罩、裁剪路径这类特殊的渲染上下文，不同浏览器的处理逻辑存在差异。而SVG原生动画是SVG标准的核心部分，浏览器对其在各种上下文的支持更统一，所以能避免这类兼容性问题。

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