3

我正在尝试使用 CSS 动画和转换来制作加载器 gif。不幸的是，以下代码将我的 Mac OSX 上的 Firefox（有时还有 Chrome、Safari）的 CPU 使用率从 <10% 转换为 >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 行为就会丢失。也就是说，图标不会连续旋转。

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

4

3 回答 3

1

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

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

在旁注中，我想你最好使用新的东西而不是旋转图像。

于 2012-08-02T12:03:16.457 回答
1

我解决了我自己的问题。我没有切换图标的可见性，而是简单地添加了它，然后将其从 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
于 2012-09-30T20:10:07.633 回答
0

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

于 2012-08-02T11:42:39.883 回答