css - 如何让CSS动画不消耗整个CPU？

我正在尝试使用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-供应商前缀，将丢失类似“加载程序gif”的行为。也就是说，图标不会持续旋转。

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

最佳答案

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

不是@ -keyframes。是@keyframes。

附带一提，我想最好使用新的图像而不是旋转的图像。

关于css - 如何让CSS动画不消耗整个CPU？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/11776662/