试图保持动画超过60fps

Question

我有一个反应中的Preloader组件，它有一个由svg形状的星形组成的动画和大约30-50个随机生成的圆圈。在一秒钟之后，所有圆圈都被转换为视口的中心，并且星形比例缩小。 我无法在大于20英寸的屏幕上保持60 fps的动画效果。

首先，恒星的宽度为300％，然后缩小到0.05。在大型显示器上，缩放会消耗大约30％的GPU，导致帧速率降至30。

.logo-wrapper {
        will-change: transform;
        transform: translate3d(0, 0, 0);
        //display: none;
        position: absolute;
        top: 0;
        left: 0;
        width: 300%;
        @include animation('preloader 1s, preloader-shrink 1.5s');
        animation-timing-function: cubic-bezier(.51, -0.9, 1, .5);
        animation-delay: 0s, 1.2s;
        transform-origin: center center;
        animation-fill-mode: both;

这是codepen：https://codepen.io/anon/pen/jwJJzO