如何在Firefox中使SVG元素上的CSS@keyframes动画更平滑，资源消耗更少？

在每个浏览器中都会导致高CPU使用率，但在Chromium中会更加平滑。如何优化其执行？下面是非常简单的SCS：

@keyframes laptop {
  from {
    transform: rotate(0deg) translateX(0.8rem) rotate(0deg);
  }

  to {
    transform: rotate(360deg) translateX(0.8rem) rotate(-360deg);
  }
}

@keyframes phone {
  from {
    transform: rotate(0deg) translateX(0.8rem) rotate(0deg);
  }

  to {
    transform: rotate(-360deg) translateX(0.8rem) rotate(360deg);
  }
}

.header {
  &__laptop {
    animation: laptop 12s linear infinite;
    will-change: transform;
  }

  &__phone {
    animation: phone 8s linear infinite;
    will-change: transform;
  }
}

---

由于动画无限循环，它们自然是资源密集型的

您可以通过使胺化为3d来欺骗CPU加速动画（从而减少负担）。例如，可以将

translateZ（0）

添加到关键帧以实现此目的

您可能会这样做：

 @keyframes laptop {
  from {
    transform: rotate(0deg) translateX(0.8rem) translateZ(0) rotate(0deg);
  }

  to {
    transform: rotate(360deg) translateX(0.8rem) translateZ(0) rotate(-360deg);
  }
}

@keyframes phone {
  from {
    transform: rotate(0deg) translateX(0.8rem) translateZ(0) rotate(0deg);
  }

  to {
    transform: rotate(-360deg) translateX(0.8rem) translateZ(0) rotate(360deg);
  }
}

.header {
  &__laptop {
    animation: laptop 12s linear infinite;
    will-change: transform;
  }

  &__phone {
    animation: phone 8s linear infinite;
    will-change: transform;
  }
}

---

谢谢我确实读到过这篇文章，认为这篇文章提高了性能，但从我的任务管理器或者Firefox的呈现来看，这篇文章看起来都不是很“起伏不定”