如何让 CSS 动画不消耗一个人的整个 CPU？答案

【问题标题】：How to have CSS animation NOT consume one's entire CPU?如何让 CSS 动画不消耗一个人的整个 CPU？
【发布时间】：2012-08-02 11:40:35
【问题描述】：

我正在尝试使用 CSS 动画和转换来制作加载器 gif。不幸的是，以下代码将我的 Mac OSX 上的 Firefox（有时还有 Chrome、Safari）的 CPU 使用率从 90%。

i.icon-repeat {
   display:none;
  -webkit-animation: Rotate 1s infinite linear;
  -moz-animation: Rotate 1s infinite linear; //**this is the offending line**
   animation: Rotate 1s infinite linear;
}
@-webkit-keyframes Rotate {
  from {-webkit-transform:rotate(0deg);}
   to {-webkit-transform:rotate(360deg);}
}
@-keyframes Rotate {
  from {transform:rotate(0deg);}
   to {transform:rotate(360deg);}
}
@-moz-keyframes Rotate {
  from {-moz-transform:rotate(0deg);}
   to {-moz-transform:rotate(360deg);}
}

请注意，如果没有infinite linear 旋转或-moz- 供应商前缀，“loader gif”-like 行为就会丢失。也就是说，图标不会连续旋转。

也许这只是一个错误，或者我做错了什么？

【问题讨论】：

旁注：我知道这很常见，但是（Ab）使用i 作为图标确实是不好的做法，你不应该这样做。除此之外，我认为您无能为力，因为您的代码是正确的，而且我看不到其他方法。
出于好奇，为什么每个@keyframes 上都有opera 前缀？（我对他们没有经验，这是必需的吗？）
为什么不直接使用 spin.js 而不是从字面上重新发明（旋转）轮子？
@Christoph i 图标是 Twitter Bootstrap 语法，所以不幸的是，它可能变得相当普遍。我知道它会阻止 italics 字体标签，但还有其他 CSS 解决方案...
@Cyrille 我想使用我自己的微调器图标。不知道 spin.js 是否允许这样做？

标签： css twitter-bootstrap css-transforms css-animations vendor-prefix

【解决方案1】：

首先，您使用的是哪个版本的 Firefox？这可能是一个错误，但众所周知，CSS3 动画会在几分之一秒内占用大量 CPU。但是，它们比对应的 jQuery 快得多。

这不是@-关键帧。这是@keyframes。

顺便说一句，我想你最好使用新的东西而不是旋转图像。

【讨论】：

我使用的是 Firefox 14.0.1。您能否澄清您的最后一条评论（“最好使用..”）？我不确定我明白你的意思。
很抱歉回来晚了。我的意思是，为什么不使用不同的方法来显示正在加载的内容。就像在 Windows 8 上如何使用 loading... 一样。明白了吗？
能否附上windows8截图或视频链接？我不确定你的意思

【解决方案2】：

我解决了自己的问题。我没有切换图标的可见性，而是简单地添加了它，然后将其从 DOM 中删除。关于使用 CSS 动画，我不知道的关键是 display:none 与 display:inline 无论如何都会消耗 CPU。

所以，不要那样做，而是这样做（结合我上面问题中的 CSS）：

var icon = document.createElement("i"); //create the icon
icon.className = "icon-repeat";

document.body.appendChild(icon);  //icon append to the DOM

function removeElement(el) {    // generic function to remove element could be used elsewhere besides this example 
  el.parentNode.removeChild(el);
}

removeElement(icon); //triggers the icon's removal from the DOM

【讨论】：

【解决方案3】：

可能是一个错误。但是与许多这些供应商前缀的东西一样，它仍然是一项正在进行的工作。为了全面获得更可靠的结果，我建议使用 JavaScript - 也许是 jQuery。

【讨论】：

谢谢。您是否有一个脚本可以顺时针旋转您可以在答案中包含或链接到的元素？