Фиксация видеокарты с интенсивной анимацией

Question

Благодаря @ Temani Afif у нас есть эта красивая рамка. Код работает нормально, но, к сожалению, есть проблема, которая делает код совершенно бесполезным .

Это стоило более 90 процентов моих ресурсов графического процессора! очевидно, мой ноутбук нагревается за 10 секунд работы!

Почему это происходит и как это исправить?

ОБНОВЛЕНИЕ: Я думаю, что проблема в том, что код отображает анимация даже за изображением, если вы прокомментируете addimage(), вы можете увидеть это.

Вы можете проверить это сами: Пожалуйста, Запустите код в CodePen

И вот код: (Мы добавляем изображение на страницу с помощью функции addimage(), все остальные CSS и HTML)

addimage(); 
function addimage() {

  let pictureSource = 'https://www.architectureartdesigns.com/wp-content/uploads/2013/03/ArchitectureArtdesigns-8.jpg';

  var node = document.getElementsByClassName('content');
  node[0].style.background = 'url("' + pictureSource + '") center/cover'

}

body {
  height: 100vh;
  margin:0;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: black;
}

.box {  
 border-radius: 10px;
  background: 
    repeating-linear-gradient(-45deg, white 0 7.5px, hotpink 0 15px) 
    0 0/21.21px 21.21px;  /* 21.21px = sqrt(2) * 15px */
  animation: animate 1s linear infinite;
}

.box .content {
  width: calc(90vw - 30px);
  height: calc(85vh - 30px);  
  border-radius: 10px;
  box-shadow: 0 0 2px deeppink, 0 0 5px rgba(0, 0, 0, 1), inset 0 0 5px rgba(0, 0, 0, 1);
  margin:15px;
}


@keyframes animate {
  to {
    background-position: 21.21px 21.21px; 
  }
}

<div class="box">
  <div class="content">

  </div>
</div>

Answer 1

Я думаю, что положение фона для анимации немного дороже. Проверьте, работает ли приведенный ниже код нормально. Я просто использовал свойство transform для анимации вместо background-position.

addimage(); 
function addimage() {

  let pictureSource = 'https://www.architectureartdesigns.com/wp-content/uploads/2013/03/ArchitectureArtdesigns-8.jpg';

  var node = document.getElementsByClassName('content');
  node[0].style.background = 'url("' + pictureSource + '") center/cover'

}

body {
  height: 100vh;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: gray;
}

.box {
  border-radius: 10px;
  position: relative;
  overflow: hidden;
}
.box::after {
    content: '';
    position: absolute;
    z-index: -1;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background:
      repeating-linear-gradient(-45deg, white 0 7.5px, hotpink 0 15px) 0 0/21.21px 21.21px;

    width: calc(100% + 21.21px);
    height: calc(100% + 21.21px);
    transform: translate(-21.21px, -21.21px);
    /* transform: translate(-15px, -15px); */
    /* transform: translate(0, 0); */
    animation: animate 1s linear infinite;


  }
.box .content {
  width: calc(90vw - 30px);
  height: calc(85vh - 30px);
  border-radius: 10px;
  box-shadow: 0 0 2px deeppink, 0 0 5px rgba(0, 0, 0, 1), inset 0 0 5px rgba(0, 0, 0, 1);
  margin: 15px;
}


@keyframes animate {
  to {
    /*     background-position: 21.21px 21.21px;  */
    transform: translate(0, 0);
  }
}

<div class="box">
  <div class="content">

  </div>
</div>