如何让CSS动画不会占用整个CPU？

我正在尝试使用CSS动画制作一个加载器gif，并将其转换。不幸的是，下面的代码将Mac OSX上的Firefox（有时是Chrome，Safari的）CPU使用率从< 10％转换为> 90％。如何让CSS动画不会占用整个CPU？

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-供应商名称，在“装载机GIF”般的行为都将丢失。也就是说，图标不会连续旋转。

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

来源

2012-08-02 tim peterson

旁注：我知道这是很常见的，但使用'i'一个图标真的是（AB）

所以取而代之的是，这样做（在我的问题的CSS上述合并）不好的做法，你不应该这样做。除此之外，我认为你不能帮助它，因为你的代码是正确的，我没有看到其他方式如何做到这一点。 – Christoph 2012-08-02 11:44:07

出于好奇，为什么歌剧预先修复每个@keyframes？（我没有经验，是否需要？） – Andy 2012-08-02 11:44:07

为什么不使用spin.js而不是从字面上重新创建（旋转）轮？ – Cyrille 2012-08-02 11:46:26

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

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-30 20:10:07

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

来源

2012-08-02 11:42:39

谢谢。你有一个脚本记住你顺时针旋转你可以包含或链接到你的答案的元素？ – 2012-08-02 11:44:30

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

这不是@ -keyframes。它是@keyframes。

在一个侧面说明，我想你最好使用新的东西，而不是旋转的图像。

来源

2012-08-02 12:03:16 williamtell

我使用Firefox 14.0.1。你能澄清你最后的评论（“你最好使用..”）吗？我不确定我明白你的意思。 – 2012-08-02 12:07:16

对不起回来真的很晚。换言之，我的意思是，为什么不使用不同的方法来显示正在加载的内容。就像在Windows 8上如何加载...获得想法？ – williamtell 2012-09-07 12:33:35

你可以包括一个Windows8的屏幕截图或视频链接？我不确定你是什么意思 – 2012-09-07 12:52:40

如何让CSS动画不会占用整个CPU？

回答

相关问题