CSS animation of the background image, high CPU utilization

Question

This code uses over 40% of my processor in 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 do not understand why. Is there something wrong with the code? I tried adding hardware acceleration to the code, but nothing changed. Can i do something? Or in some other way that uses less CPU, what can I do to change background images using my css?

It seems I can just make a GIF to get around this and use it as a background, but my images are 1920x1080 and all GIF makers are less than 500x500. I found the one that created 1500x844, but it has no transition options.

Edit: I managed to create a 15-second GIF from the video with images, but it still consumes a huge amount of processor and has much lower quality.

Edit2: , Chrome?

  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

Chrome Edge. Chrome: 12% , : 2% .

Answer 1

, . 9 1920x1080 . ? ? , ?

EDIT:

: fooobar.com/questions/133164/... , transform: translateZ(0); , GPU.

EDIT2:

, . :

 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;

30%. , ( ), .