CSS关键帧动画CPU占用率高，应该是这样吧？

Question

我在几个元素上使用了以下关键帧动画:

@keyframes redPulse {
    from { background-color: #bc330d; box-shadow: 0 0 9px #333; }
    50% { background-color: #e33100; box-shadow: 0 0 18px #e33100; }
    to { background-color: #bc330d; box-shadow: 0 0 9px #333; }
}
@-webkit-keyframes redPulse {
    from { background-color: #bc330d; box-shadow: 0 0 9px #333; }
    50% { background-color: #e33100; box-shadow: 0 0 18px #e33100; }
    to { background-color: #bc330d; box-shadow: 0 0 9px #333; }
}
.event_indicator {
    display: inline-block;
    background-color: red;
    width: 5px;
    margin-right: 5px;

    -webkit-animation-name: redPulse;
    -webkit-animation-duration: 1s;
    -webkit-animation-iteration-count: infinite;

    animation-name: redPulse;
    animation-duration: 1s;
    animation-iteration-count: infinite;
}

在我的电脑上，Chrome 和 Firefox 的 CPU 使用率都在 40% 左右。 是动画的当前状态(不错但暂时不可用)还是我缺少一些神奇的属性？

您可以使用相同的动画检查以下示例: http://jsfiddle.net/Nrp6Q/

Answer 1

是的，这是正常的，因为页面上有几个无限循环动画。因此，CPU 在渲染这些元素时不断地工作。有一个“神奇”的属性可以显着降低 CPU 使用率，那就是:

transform: translateZ(0);

这会将元素组合到它们自己的层中(通过欺骗浏览器认为它会进行 3D 转换)并且在大多数情况下，浏览器应该利用 GPU 加速，减轻 CPU 的负担。对我来说，这减少了大约 20%(几乎一半)。

要了解有关此技术的更多信息，请查看:http://ariya.blogspot.com/2011/07/fluid-animation-with-accelerated.html

此外，动画中的关键帧越多，制作起来就越费力。只需尝试剪掉中间关键帧的动画，您就会看到 CPU 使用率再次大幅下降 (~10-12%)。

最后，并非所有属性都是平等的——对于浏览器来说，box-shadow 比 background-color 更难动画流畅。保持所有关键帧完好无损，但删除 box-shadow 属性，使用 translateZ(0) 技巧使我的 CPU 使用率仅徘徊在 10-11%。

尽管这么说让我很痛苦，但对于无限循环动画，动画 .gif 在浏览器动画的当前状态下会比 CSS3 表现得好得多，尤其是如果您计划保留其中的许多动画在页面上呈现一段时间。

2017 年更新:

对于那些仍在寻找这个问题和答案的人来说，translate3d(0, 0, 0) 提供与 translateZ(0) 相同的好处，您是只需同时设置 translateX() 和 translateY() 即可。请忽略 @Farside 的评论因为他在他的演示中使用了 translate3d(X, Y, Z) 但没有将它与 translate(X, Y) 进行比较，这表明使用这种技术仍然可以显着差异。

根据 this question ，有些人发现使用 transform: rotateZ(360deg) 在所有浏览器上都有更好的性能，尤其是 Chrome。