同时使用CSS动画与backdrop-filter导致CPU占用过高求助

问题详情 #

我的页面中有若干仅使用transform属性的无限循环CSS关键帧动画，示例代码如下：

@keyframes movement-rotation-effect-first {
  0% {
    transform: translate(0, 0);
    -webkit-transform: translate(0, 0);
  }
  17% {
    transform: translate(-6px, -6px);
    -webkit-transform: translate(-6px, -6px);
  }
  34% {
    transform: translate(6px, 0);
    -webkit-transform: translate(6px, 0);
  }
  51% {
    transform: translate(0, 6px);
    -webkit-transform: translate(0, 6px);
  }
  68% {
    transform: translate(6px, -6px);
    -webkit-transform: translate(6px, -6px);
  }
  85% {
    transform: translate(-6px, 0);
    -webkit-transform: translate(-6px, 0);
  }
  100% {
    transform: translate(0, 0);
    -webkit-transform: translate(0, 0);
  }
}

animation: movement-rotation-effect-first 10s linear infinite;
-webkit-animation: movement-rotation-effect-first 10s linear infinite;

同时页面还有若干未添加动画、应用了backdrop-filter模糊效果的元素，代码如下：

@supports (-webkit-backdrop-filter: blur(25px)) or (backdrop-filter: blur(25px)) {
   backdrop-filter: blur(25px);
   -webkit-backdrop-filter: blur(25px);
}

单独保留backdrop-filter时页面运行正常，单独保留动画时也没问题，但同时启用两者时，CPU占用骤增，设备风扇噪音明显变大。需要说明的是，应用backdrop-filter的元素和动画元素是完全不同的元素，backdrop-filter也没有包含在动画定义中。

已尝试的无效优化方案 #

我试过添加以下优化样式，但没有任何效果：

.animation-fix {
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  perspective: 1000px;
  -webkit-perspective: 1000px;
  transform: translate3d(0, 0, 0);
  -webkit-transform: translate3d(0, 0, 0);
  will-change: transform;
}

因为页面需要同时保留动画和backdrop-filter效果，恳请各位提供可行的CPU优化方案，感谢帮助！

补充：已将测试页面上传至服务器供测试。

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