Анимированный линейный градиент, пожирающий загрузку процессора ⇐ CSS

[Anonymous]

У меня есть анимация для изменения тела и изменения цвета фона. Все работает нормально, однако когда запускается анимация, я вижу, что мой процессор загружен на 100%. Сначала я подумал, что это может быть из-за @keyframes, однако, когда я изменил код, отказавшись от чередования цветов, я увидел очень резкое снижение перегрузки процессора, постоянно достигающее 40%. Я понял, что это может быть связано с анимацией.
Вот мой CSS-код:

< div class="snippet-code">

Код: Выделить всё

body {
background: linear-gradient(45deg, #F17C58, #E94584, #24AADB, #27DBB1, #FFDC18, #FF3706);
background-size: 600% 100%;
background-repeat: repeat;
background-attachment: fixed;
animation: gradient 16s linear infinite;
animation-direction: alternate;
}

@keyframes gradient {
0% {
background-position: 0%
}
100% {
background-position: 100%
}
}

Может ли кто-нибудь мне помочь?

Подробнее здесь: https://stackoverflow.com/questions/661 ... -cpu-usage