Search code examples
csscss-animationslinear-gradients

animated linear gradient devouring CPU usage

I have an animation for alternating the body and change its background color. Everything works just fine, however when the animation runs I can see that my CPU is at 100%. At first I thought it might be due to @keyframes, however when I changed the code from alternating the colors, I saw a very critic CPU overload decrease, of an overwhelming constantly 40%. So I understood it might be due to animation.

Here's my CSS 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%
  }
}

Can someone help me?

Solution

  • Use transformation by considering pseudo element:

    html::before {
  content: "";
  position: fixed;
  z-index:-2;
  top: 0;
  left: 0;
  width: 600%;
  bottom: 0;
  background: linear-gradient(45deg, #F17C58, #E94584, #24AADB, #27DBB1, #FFDC18, #FF3706);
  animation: gradient 16s linear infinite alternate;
}

@keyframes gradient {
  100% {
    transform: translateX(-83.33%) /* 5/6x100% */
  }
}