Animated background eating up CPU

[borianparker]

I’m using a nice gradually changing gradient background on my site. The problem is after a few seconds with the site open, my macbook fan is screaming. I’m on a windows machine now and it seems like it causes a not-small bump in Chrome’s CPU usage, but nothing crazy. Is any of the CSS I’m using here overly dependent on the CPU or graphics card or something?

body::before {
content:””; /* required for ::before /
position:fixed; / don’t scroll with page /
z-index:-100; / place behind elements on page */
width:100%;
height:100%;
background-color: #EFEAE6;
background-image:
radial-gradient(circle farthest-side at top right, transparent, #DACFDD), radial-gradient(ellipse farthest-corner at 100% 100%, transparent, #E1A2AB);
animation:bg-change 20s infinite;
}

    @keyframes bg-change {
      0%, 100% {
        filter:hue-rotate(0deg);
      }
      50% {
        filter:hue-rotate(-95deg);
      }

    }

[Paulie_D]

You’re constantly repainting the background with the animation. Frankly, I’m not surprised the GPU is screaming.

https://www.html5rocks.com/en/tutorials/speed/high-performance-animations/

[Author]

Posts