使用 50% CPU 的引导进度条动画

【问题标题】：Bootstrap Progress Bar Animation Using 50% CPU使用 50% CPU 的引导进度条动画
【发布时间】：2016-04-19 23:29:10
【问题描述】：

我的网站上有几个进度条<div class="progress-bar progress-bar-striped active"></div>。
这些进度条占用大约 50% 的 CPU。
当我从所有进度条中删除类 active 时，CPU 急剧下降。
我想要不占用太多 CPU 的动画进度条。
这可能吗？

【问题讨论】：

标签： jquery html css progress-bar angular-ui-bootstrap

【解决方案1】：

我看到一个answer 关于 CSS 动画的 CPU 使用情况，他们建议使用：

transform: translateZ(0);

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

【讨论】：