title: CSS background image animation, high CPU usage
body: <p>This code is using more than 40% of my CPU on Chrome.</p>
  
  <pre><code>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);}
  }
  </code></pre>
  
  <p>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?</p>
  
  <p>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.</p>
  
  <p>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.</p>
  
  <p>Edit2: Possibly a Chrome issue? </p>
  
  <pre><code>  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;
  }
  </code></pre>
  
  <p><a href="http://scratchpad.io/impolite-harmony-1298" rel="nofollow">http://scratchpad.io/impolite-harmony-1298</a></p>
  
  <p>Tested on Chrome and Edge. Chrome: About 12% CPU usage, Edge: About 2% CPU usage.</p>