Firefox浏览器中CSS SVG星形摆动画卡顿问题排查求助

我仔细看了你的代码和问题，Firefox里卡顿的原因主要是SVG动画的兼容细节和性能优化点没处理到位——虽然你加了-moz前缀，但还有几个关键地方可以调整：

1. 修复transform-box的兼容问题 #

Firefox对SVG元素上的transform-box: fill-box支持不如Chrome/Opera稳定，尤其是嵌套<g>元素的时候。你可以直接用百分比定义transform-origin，代替依赖fill-box，兼容性会更可靠：

#target {
  /* 替换原来的transform-origin，用百分比明确相对位置 */
  transform-origin: 50% 0;
  /* 去掉易出问题的-moz-transform-box，改用默认的border-box逻辑 */
  position: absolute;
  animation-name: example;
  animation-duration: 4s;
  animation-iteration-count: infinite;
  will-change: transform; /* 提示浏览器提前为动画分配资源 */
}

#path1086 {
  position: relative;
  animation-name: star;
  animation-duration: 2s;
  animation-iteration-count: infinite;
  transform-origin: 50% 50%; /* 用百分比代替center center，逻辑更清晰 */
  will-change: transform;
}

2. 触发硬件加速提升动画流畅度 #

Firefox中给动画的transform属性加上translateZ(0)，可以触发GPU硬件加速，减少浏览器的CPU重绘压力，从根源缓解卡顿：

@keyframes example {
  0%, 100% {transform: rotate(45deg) translateZ(0);}
  50% {transform: rotate(-45deg) translateZ(0);}
}

@keyframes star {
  0%, 100% {transform: rotate(45deg) translateZ(0);}
  50% {transform: rotate(-45deg) translateZ(0);}
}

3. 简化SVG结构（可选优化） #

你可以尝试减少<g id="target">的嵌套层级，或者把摆杆和星形的动画逻辑合并，进一步降低Firefox的重绘区域。不过前面两个优化已经能解决大部分卡顿问题了。

修改后的完整代码 #

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Star Pendulum</title>
<style>
#path1086 {
  position: relative;
  animation-name: star;
  animation-duration: 2s;
  animation-iteration-count: infinite;
  transform-origin: 50% 50%;
  will-change: transform;
}
#target {
  transform-origin: 50% 0;
  position: absolute;
  animation-name: example;
  animation-duration: 4s;
  animation-iteration-count: infinite;
  will-change: transform;
}
@keyframes example {
  0%, 100% {transform: rotate(45deg) translateZ(0);}
  50% {transform: rotate(-45deg) translateZ(0);}
}
@keyframes star {
  0%, 100% {transform: rotate(45deg) translateZ(0);}
  50% {transform: rotate(-45deg) translateZ(0);}
}
</style>
</head>
<body>
<svg width="100%" height="100vh" viewBox="0 0 1366.0 768.0" version="1.1" id="SVGRoot" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg">
<defs id="defs824" />
<g id="layer1">
<rect style="opacity:1;fill:#0000ff;fill-opacity:0.517647;stroke:#000000;stroke-width:4.73953" id="rect2147" width="100%" height="766.33557" x="-4.3173833" y="2.1586916" />
<path style="font-variation-settings:normal;opacity:1;vector-effect:none;fill:none;fill-opacity:0.517647;fill-rule:evenodd;stroke:#000000;stroke-width:4.73953;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;-inkscape-stroke:none;stop-color:#000000;stop-opacity:1" id="path1040" d="m 1228.2955,753.38337 -42.523,-82.92194 -92.416,-11.98026 65.7231,-66.06609 -17.1642,-91.59499 83.1421,42.09085 81.808,-44.62855 -14.3385,92.07966 67.7244,64.01303 -92.0038,14.81751 z" />
<g id="target" transform="translate(-47.491217,94.982435)" >
<rect style="fill:#0000ff;fill-opacity:0.517647;stroke:#000000;stroke-width:4.73953" id="rect936" width="10.793459" height="317.32767" x="319.48636" y="64.76075" />
<path style="font-variation-settings:normal;opacity:1;vector-effect:none;fill:#00ff00;fill-opacity:0.517647;fill-rule:evenodd;stroke:#000000;stroke-width:4.73953;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;-inkscape-stroke:none;stop-color:#000000;stop-opacity:1" id="path1086" d="m 272.8891,413.16778 20.88967,-33.55431 -15.79857,-36.23086 38.3673,9.4984 29.57557,-26.22129 2.82264,39.42465 34.07728,20.02521 -36.62283,14.86737 -8.51465,38.59755 -25.45678,-30.2361 z" />
</g>
</g>
</svg>
</body>
</html>

这些调整应该能让你的星形摆在Firefox里流畅运行了——核心是解决了transform-origin的兼容问题，同时通过硬件加速减少了浏览器的重绘压力。

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