CSS background image animation, high CPU usage - css

Question

This code is using more than 40% of my CPU on Chrome.
body {
-webkit-animation: swapwall 20s infinite;
-webkit-animation-timing-function:linear;
}
#-webkit-keyframes swapwall {
0%{background-image:url(img1.png);}
20%{background-image:url(img2.png);}
25%{background-image:url(img3.png);}
45%{background-image:url(img4.png);}
50%{background-image:url(img5.png);}
70%{background-image:url(img6.png);}
75%{background-image:url(img7.png);}
95%{background-image:url(img8.png);}
100%{background-image:url(img9.png);}
}
I don't understand why. Is there something wrong with the code? I tried adding hardware acceleration to the code but nothing changed. Is there anything I can do? Or some other way, that uses less CPU, that I can do to change background images with my css?
It seems I can just make a GIF to bypass this and use that as the background, but my images are 1920x1080 and all GIF makers are less than 500x500. I found one that created 1500x844, but it has no transition options.
Edit: I managed to create a 15 sec GIF from a video with the images, but it still consumes a huge amount of CPU and at a much lower quality.
Edit2: Possibly a Chrome issue?
body{background-color:#111111;}
#inlineContent {
pointer-events: none;
display: block !important;
}
#inlineContent:before {
position: fixed;
left: 0;
top: 0;
content: '';
width: 100%;
height: 100%;
background-image:
url(http://i.imgur.com/nncl4M8.png),
url(http://i.imgur.com/yc91VzR.png),
url(http://i.imgur.com/LjTST41.png);
animation: Falling 20s linear infinite;
-moz-animation: Falling 20s linear infinite;
-webkit-animation: Falling 20s linear infinite;
z-index: 102;
}
#keyframes Falling {
0% { background-position: 0 0, 0 0, 0 0; }
100% { background-position: 500px 1000px, 400px 400px, 300px 300px; }
}
#-moz-keyframes Falling {
0% {background-position: 0 0, 0 0, 0 0; }
100% {background-position: 500px 1000px, 400px 400px, 300px 300px;}
}
#-webkit-keyframes Falling {
0% { background-position: 0 0, 0 0, 0 0; }
100% { background-position: 500px 1000px, 400px 400px, 300px 300px; }
}
.Falling {
animation-name: Falling;
-moz-animation-name: Falling;
-webkit-animation-name: Falling;
}
http://scratchpad.io/impolite-harmony-1298
Tested on Chrome and Edge. Chrome: About 12% CPU usage, Edge: About 2% CPU usage.

Answer 1

It sounds as though you are just overloading it. 9 images at 1920x1080 is usually a pretty hefty weight. What is the total file size for those images? Have you compressed them? Do you have a link to a demo of your code so that I can look more closely at everything?
EDIT:
After some digging around I came across this answer: https://stackoverflow.com/a/13293044/3909886
The suggestion is to add transform: translateZ(0); to your class, which should then allow the browser you use the GPU acceleration.
EDIT2:
I believe that the issue is down to the pixel width of the images. When using the following code:
background-size: cover;
-webkit-animation: swapwall 5s infinite;
-webkit-animation-timing-function:linear;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
transform: translateZ(0);
margin: auto;
width: 500px;
height: 500px;
My cpu usage is down to 30%. I an only assume that the browser is struggling with the actual size of the images (number of pixels) that need updating on each swap.