CSS background image animation, high CPU usage
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/3909886The 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.