CSS背景图片动画，CPU占用率高

Question

这段代码在 Chrome 上占用了我 40% 以上的 CPU。

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);}
}

我不明白为什么。代码有问题吗？我尝试在代码中添加硬件加速，但没有任何改变。有什么我可以做的吗？或者其他一些使用更少 CPU 的方式，我可以用我的 css 更改背景图像？

似乎我可以制作一个 GIF 来绕过它并将其用作背景，但我的图像是 1920x1080 并且所有 GIF 制造商都小于 500x500。我找到了一个创建 1500x844，但它没有过渡选项。

编辑：我设法从带有图像的视频创建了一个 15 秒的 GIF，但它仍然消耗大量 CPU 并且质量低得多。

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% 的 CPU 使用率，Edge：大约 2% 的 CPU 使用率。

Answer 1

听起来好像你只是在超载它。 1920x1080 的 9 张图像通常是相当大的重量。这些图像的总文件大小是多少？你压缩过它们吗？您是否有指向您的代码演示的链接，以便我可以更仔细地查看所有内容？

编辑：

经过一番挖掘，我发现了这个答案：https://stackoverflow.com/a/13293044/3909886 建议将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;

我的 CPU 使用率降至 30%。我只假设浏览器正在努力处理每次交换时需要更新的图像的实际大小（像素数）。