Загрузка процессора высокая для моей CSS анимации. Могу ли я использовать графический процессор, чтобы уменьшить нагрузку?

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/

Анимация корректно останавливается после загрузки элемента данными. Но удар по процессору из Painting and Rendering абсолютно абсурден.

Мне удалось использовать другие методы для значительного снижения использования ЦП, но эти методы не работают в IE 11, и его работа в IE обязательна.

Мой инстинкт заключается в том, что я должен иметь возможность использовать графический процессор для этой анимации, и это уменьшит нагрузку, которую эта анимация оказывает на графический процессор.

transform: translateZ(0);

Кто-нибудь знает, как переписать это более эффективным способом?

Answer 1

Может быть, что-то подобное будет работать? Вместо прямой анимации фонового изображения, которое требует перекраски для каждого кадра, попробуйте использовать transform: translate3d() для псевдоэлемента. Включенная ось z в translate3d() также вызовет рендеринг на 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;
}