I noticed that this particular animation is causing high CPU usage on all browsers, although it runs more smoothly in Chromium. Is there a way to optimize its performance? Here's the SCSS code which is relatively simple:
@keyframes laptop {
from {
transform: rotate(0deg) translateX(0.8rem) rotate(0deg);
}
to {
transform: rotate(360deg) translateX(0.8rem) rotate(-360deg);
}
}
@keyframes phone {
from {
transform: rotate(0deg) translateX(0.8rem) rotate(0deg);
}
to {
transform: rotate(-360deg) translateX(0.8rem) rotate(360deg);
}
}
.header {
&__laptop {
animation: laptop 12s linear infinite;
will-change: transform;
}
&__phone {
animation: phone 8s linear infinite;
will-change: transform;
}
}