SVG元素CSS Animation在Mozilla浏览器中失效问题求助

问题核心是Firefox不支持通过CSS动画直接修改SVG元素的几何属性（如cy、cx），而Chrome允许这类操作，这就是代码在Chrome正常、Firefox无反应的原因。

给你两种可行的修复方案：

方案一：改用CSS transform 实现位移 #

把修改cy的逻辑换成transform: translateY()，所有现代浏览器都支持这种方式：

.myCircle {
  animation: animateCircle 5s;
}

@keyframes animateCircle {
  70% {
    transform: translateY(30px); /* 对应从cy=50到80的垂直位移量 */
  }
}

无需再写-moz-、-webkit-这类前缀，目前主流浏览器已全面支持标准CSS动画语法。

方案二：使用SVG原生<animate>元素 #

如果更倾向于SVG原生能力，可以直接在<circle>标签内定义动画，这种方式在所有支持SVG的浏览器中都能正常运行：

<svg width="400" height="110">
  <circle class="myCircle" cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red">
    <animate
      attributeName="cy"
      from="50"
      to="80"
      dur="5s"
      fill="freeze"
      keyTimes="0;0.7;1"
      values="50;80;80"
    />
  </circle>
</svg>

通过SVG原生动画语法，完全避开CSS动画的兼容性差异。

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