我在几个元素上使用以下关键帧动画：
@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中获得了大约40％的cpu使用率。
它是动画的当前状态(好，但现在不可用)或者我缺少一些魔法属性？
您可以使用相同的动画检查以下示例：
http://jsfiddle.net/Nrp6Q/
解决方法
是的，这是正常的，因为你在页面上有几个无限循环的动画。因此，cpu在渲染这些元素的同时继续工作。有一个“魔术”属性，将显着减少cpu使用，这是：
transform: translateZ(0);
这将复合元素到自己的图层(通过欺骗浏览器认为它将进行3D变换)，浏览器应该在大多数情况下利用GPU加速，减轻cpu的负担。对我来说，这削减了约20％(几乎一半)。
要阅读更多关于这个技术看看：http://ariya.blogspot.com/2011/07/fluid-animation-with-accelerated.html
此外，动画中的关键帧越多，它的收益也越大。只需尝试中间关键帧切出动画，你会看到另一个实质(〜10-12％)的cpu使用下降。
最后，并非所有属性都相等 – 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)进行比较，这将显示使用此技术仍然有很大的区别。
