CPU 我的 CSS 动画使用率很高。我可以使用 GPU 来减轻负担吗？

Question

我制作了以下动画以在页面加载时播放。

HTML <div class="skeleton"></div>

CSS

      @keyframes shimmerBackground {
        0% { background-position: -468px 0 }
        100% { background-position: 468px 0 }
      }

      .skeleton:empty{
          width: 500px;
          height: 40px;
          animation-duration: 1s;
          animation-timing-function: linear;
         animation-iteration-count: infinite;
         background: no-repeat #e4e3e3;
         background-image: linear-gradient(to right, #e4e3e3 0, #c7c6c6 20%, #e4e3e3 40%, #e4e3e3 100%);
         animation: shimmerBackground 1s linear infinite;
      }

这是实际操作：https://jsfiddle.net/NuccioJohn/fx1wr8e6/

动画在元素加载数据后正确地自行停止。但是绘画和渲染对 CPU 的打击是绝对荒谬的。

我已经能够使用其他方法来显着降低 CPU 使用率，但这些方法在 IE 11 中不起作用，必须在 IE 中起作用。

我的直觉是我应该能够使用 GPU 来制作这个动画，这将减轻这个动画对 GPU 的负担。

transform: translateZ(0);

有谁知道如何以更有效的方式重写它？

Answer 1

也许这样的事情会奏效？与其直接为背景图像设置动画，这需要为每一帧重新绘制，不如尝试在伪元素上使用 transform: translate3d()。 translate3d() 中包含的 z 轴也将强制 GPU 渲染！

@keyframes shimmerBackground {
  0% { transform: translate3d(-400px, 0, 0) }
  100% { transform: translate3d(900px, 0, 0) }
}

.skeleton:empty{
  width: 500px;
  height: 40px;
  position: relative;
  overflow: hidden;
  background-color: #e4e3e3;
}

.skeleton:empty::before {
  content: "";
  display: block;
  width: 400px;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  background: no-repeat #e4e3e3;
  background-image: linear-gradient(to right, #e4e3e3 0, #c7c6c6 20%, #e4e3e3 40%, #e4e3e3 100%);
  animation-duration: 1s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation: shimmerBackground 1s linear infinite;
}

CPU 我的 CSS 动画使用率很高。我可以使用 GPU 来减轻负担吗？

CPU Usage high for my CSS Animation. Can I use the GPU to lessen the burden?

css

gpu

cpu-usage

css-transforms

css-animations