css SVG-анимация использует слишком много ресурсов сервера - PullRequest
Новая
       48

css SVG-анимация использует слишком много ресурсов сервера

0 голосов
/ 29 марта 2020

Анимация, подобная приведенной ниже, истощает ресурсы сервера?

У меня есть много похожих анимаций (не только в прямоугольной, но и в разных формах), некоторые имеют более 20 nth-child до 8 секунд, я работаю на локальном хосте, и он разряжает батарею. Мой ноутбук горячий, когда он включен, и системное приглашение на странице использует слишком много ресурсов.

Интересно, это вызвано анимацией? если да, как я могу достичь того же результата, не истощая ресурсы сервера? 

#svg rect {
  --animation-delay: 0.1s;
  animation: ani 1.8s linear infinite var(--animation-delay);
}


#svg rect:hover {
  animation:none;

} 


#svg rect:nth-child(2) { --animation-delay: 0.2s; }
#svg rect:nth-child(3) { --animation-delay: 0.3s; }
#svg rect:nth-child(4) { --animation-delay: 0.4s; }
#svg rect:nth-child(5) { --animation-delay: 0.5s; }



@keyframes ani {
  0% {
    fill: #0057B8;
  }

  20% {
    fill: #F11E4A;
  }

  40% {
    fill: #F8A527;
  }

  60% {
    fill: #266D7F;
  }

  80% {
    fill: #82A;
  }

  100% {
    fill: #0057B8;
  }
}
<svg id="svg" width="401" height="275" viewBox="0 0 401 275" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="401" height="275" fill="white"/>
<rect x="50" y="91" width="57" height="57" fill="#C4C4C4"/>
<rect x="118" y="91" width="57" height="57" fill="#C4C4C4"/>
<rect x="186" y="91" width="57" height="57" fill="#C4C4C4"/>
<rect x="254" y="91" width="57" height="57" fill="#C4C4C4"/>
</svg>
...