CSS background image animation, high CPU usage

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.

I should have said - for my purposes, I can't use any JS or HTML, only CSS. — Hayu123, Oct 24 '15 at 07:16
Okay, that's good to know. Looks like it's pretty much all spent on repainting composite layers when I checked. And it doesn't even seem to matter much how large the element is actually displayed. — Shikkediel, Oct 24 '15 at 07:35

score 3 · Answer 1 · edited May 23 '17 at 12:23

3

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.

edited May 23 '17 at 12:23

Community

1
1

answered Oct 24 '15 at 00:38

Sam Willis

4,001
7
40
59

2

They are about 100-200 KB JPG. I tried 900 KB PNG too, but there is no difference in CPU usage. Actually, I just tried it now with only 3 images, but the CPU usage is exactly the same. Same with 2 images. – Hayu123 Oct 24 '15 at 00:53
I've had a bit of a search and it seems that this usage is expected due to the infinite loop you have set. Try adding this property `transform: translateZ(0);` This info is from this answer here: http://stackoverflow.com/a/13293044/3909886 – Sam Willis Oct 24 '15 at 01:04
Do you have a link to a live version of the code so I can look at it myself? – Sam Willis Oct 24 '15 at 01:12
Sure, I took out other parts of the code which reduced CPU usage significantly, but it's still incredibly high for a single webpage. http://scratchpad.io/vivacious-rule-1953 – Hayu123 Oct 24 '15 at 01:25
I've just played for the past 15 minutes with this and can't seem to get it any lower than it starts off at. All I can put it down is the pixel size of the images on the page. When using this code I've appended to the answer, I get usage down to 30%. – Sam Willis Oct 24 '15 at 01:47
I guess it's inevitable. I created a GIF, obviously lower quality, but it still used a lot of CPU, although not nearly as much. – Hayu123 Oct 24 '15 at 03:15
It seems this may be a Chrome problem. The code with the images doesn't work at all in Microsoft Edge, so I tried something else that works. http://scratchpad.io/impolite-harmony-1298 about 2% CPU usage in Edge and 12% in Chrome. – Hayu123 Oct 24 '15 at 20:24

CSS background image animation, high CPU usage

1 Answers1