如何在Firefox中使我在SVG元素上的CSS @keyframe动画更流畅，并减少对资源的消耗？

Question

This animation在每个浏览器中都有很高的CPU使用率，但在Chromium中要流畅得多。我如何优化它的执行？下面是-pretty simple- SCSS：

@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;
  }
}

Answer 1

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

您可以通过将胺化设置为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;
  }
}