У меня есть очень простой тестовый пример:
<div id="container">
<div id="target"></div>
</div>
И очень простая анимация для него:
@keyframes marquee-x {
from { transform: translate(0, 0); }
to { transform: translate(-100%, 0); }
}
#container {
width: 200px;
height: 100px;
margin: 40px;
background: rgba(255,0,0,0.4);
}
#target {
background-color: black;
border-radius: 0px;
width: 50px;
height: 50px;
animation: marquee-x 5s infinite;
}
И
вот этот простейший пример грузит CPU на 20% (по сути почти полностью загружает одно ядро):
Стоит отключить анимацию - нагрузка сразу падает:
Почему? Как с этим бороться? Я помню всегда радостные статьи, как translate оптимизирован и вообще никак-никак не должен влиять на производительность.
transform: translateZ(0); и
will-change: transform; никак не влияют на результат
Средний
