javascript - 我的CSS动画消耗了大量资源

我试图在css3 + Javascript中用闪烁的星星做一个繁星之夜，但是，我的动画消耗了很多CPU，主要的动画是:

  @for $i from 0 through 400 {
  .star:nth-child(#{$i}) {
    $star-size: (random() * (1-4) +4) + px;
    top: (random(100)) + vh;
    left: (random(100)) + vw;
    width: $star-size;
    height: $star-size;
    animation: blinker 1.2s alternate infinite ease-in-out;
    animation-delay: (random(30) / 10) + s;
    transform: scale(0.2);
  }
}

@keyframes blinker {
  100% {
    transform: scale(1);
  }
}

完整代码:https://jsfiddle.net/sam7krx0/
有什么办法可以使这段代码更好地执行？

编辑:

尝试使用translateZ(0)和will-change: transform，但动画仍由CPU渲染。

https://jsfiddle.net/8hn97kcx/2/

编辑2:
Firefox似乎是问题所在，而在chrome上进行测试时，动画使用的CPU较少。

编辑3:

在firefox开发人员版本69.0b4上运行的上述小提琴的配置文件:

firefox profile

CPU使用率:

最佳答案

您是否尝试过使用will-change属性-这可以帮助浏览器了解更改，并在可能的情况下将其卸载到合成器。