CSS无限旋转动画

我想通过CSS旋转我的加载图标

我有一个图标和以下代码：

<style>
#test {
    width: 32px;
    height: 32px;
    background: url('refresh.png');
}

.rotating {
    -webkit-transform: rotate(360deg);
    -webkit-transition-duration: 1s;
    -webkit-transition-delay: now;
    -webkit-animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
}
</style>

<div id='test' class='rotating'></div>

#试验{
宽度：32px；
高度：32px；
背景：url（'refresh.png'）；
}
.轮换{
-webkit变换：旋转（360度）；
-webkit转换持续时间：1s；
-webkit转换延迟：现在；
-webkit动画计时功能：线性；
-webkit动画迭代计数：无限；
}

但它不起作用。如何使用CSS旋转图标？

工作正常：

#测试{
宽度：11px；
高度：14px；
背景：url（数据：数据：图像/gif；Bas64，R0LGGGGGGGGGGGGGGGGG4+HHH4 3/v7+/DW8 v8 vv8 v8 v8 v8 v8 v8 v8 v8 v8 v8 v8 v8 v8 v8 v8 v8 v8 v8 v8 v8 v8 v8 v8 v8 v8 v8 v8 v8 v8 v8 v7 v8 v8 v8 v8 v8 v8 v8 v8 v7 v8 v8 v8 v8 v8 v8 v8 v8 v8 v8 v8 v8 v8 v8 v8 v8 v8 v8 v8 v8 v8 v8 v8 v8 v8 v8 v8 v8 v8 v8 v8 v8 v8 v8 v8 v8 v8 v8 v8 v8 v8 v8 v8 v8 v8 v8 v8 v8 v8 v8 v8 v8 v8 v8 v8 v）；
}
@-webkit关键帧旋转{
从{
-webkit变换：旋转（0度）；
}
到{
-webkit变换：旋转（360度）；
}
}
.轮换{
-webkit动画：旋转2s线性无限；
}

@-webkit关键帧旋转/*Safari和Chrome*/{
从{
-webkit变换：旋转（0度）；
-o变换：旋转（0度）；
变换：旋转（0度）；
}
到{
-webkit变换：旋转（360度）；
-o变换：旋转（360度）；
变换：旋转（360度）；
}
}
@关键帧旋转{
从{
-ms变换：旋转（0度）；
-moz变换：旋转（0度）；
-webkit变换：旋转（0度）；
-o变换：旋转（0度）；
变换：旋转（0度）；
}
到{
-ms变换：旋转（360度）；
-moz变换：旋转（360度）；
-webkit变换：旋转（360度）；
-o变换：旋转（360度）；
变换：旋转（360度）；
}
}
.轮换{
-webkit动画：旋转2s线性无限；
-moz动画：旋转2s线性无限；
-ms动画：旋转2s线性无限；
-o动画：旋转2s线性无限；
动画：旋转2s线性无限；
}

旋转

CSS中的无限旋转动画

/*无限旋转*/
.轮换{
动画：旋转1.5s线性无限；
}
@关键帧旋转{
到{变换：旋转（360度）；}
}
/*旋转器仅用于演示*/
斯宾纳先生{
显示：内联块；宽度：50px；高度：50px；
边界半径：50%；
盒影：插图-2px02px#0bf；
}

div
{  
高度：200px；
宽度：200px；
-webkit动画：旋转2s无限线性；
}
@-webkit关键帧旋转{
0%{-webkit变换：旋转（0度）；}
100%{-webkit变换：旋转（360度）；}
}

不带任何前缀，例如最简单的：

.loading-spinner {
  animation: rotate 1.5s linear infinite;
}

@keyframes rotate {
  to {
    transform: rotate(360deg);
  }
}

---

适用于所有现代浏览器

.rotate{
 animation: loading 3s linear infinite;
 @keyframes loading {
  0% { 
    transform: rotate(0); 
  }
  100% { 
    transform: rotate(360deg);
  }
 }
}

---

添加类时的旋转。活动

  .myClassName.active {
                -webkit-animation: spin 4s linear infinite;
                -moz-animation: spin 4s linear infinite;
                animation: spin 4s linear infinite;
              }



@-moz-keyframes spin {
       100% {
        -moz-transform: rotate(360deg);
      }
     }
     @-webkit-keyframes spin {
      100% {
         -webkit-transform: rotate(360deg);
       }
     }
     @keyframes spin {
       100% {
         -webkit-transform: rotate(360deg);
         transform: rotate(360deg);
       }
     }

---

创建解决方案-请回答，以结束问题。您可以添加自己的答案。在其中，包括来自JSFIDLE演示中的代码。是否有任何交叉浏览器css解决方案可用？一个问题是

-moz-

和

-ms-

前缀在

-webkit关键帧下是必需的，因为只有webkit会读取
-webkit-keyframes
我相信删除它们是安全的。我正确理解这在理论上不是完美的，因为非供应商前缀属性应该始终是最后一个，以免覆盖符合标准的行为？请参阅：酷。编辑前正在检查。不是100%确定。@Ricky-提示：当您已经和Uthor（如上）在“编辑注释”中提到它不是一个坏主意。所以编辑不会被拒绝为“激进的改变”；-如果您使用PASCSS，请考虑使用AutoPoFixor来处理所有的跨浏览器问题，只要使用<代码>转换< /代码>。嗨，欢迎到堆栈溢出！当你回答一个问题时，你应该包括一些解释，比如作者做错了什么，你做了什么来修复它。我告诉你这一点是因为你的答案被标记为低质量，目前正在审查中。您可以通过单击“编辑”按钮来编辑您的答案。
  .myClassName.active {
                -webkit-animation: spin 4s linear infinite;
                -moz-animation: spin 4s linear infinite;
                animation: spin 4s linear infinite;
              }



@-moz-keyframes spin {
       100% {
        -moz-transform: rotate(360deg);
      }
     }
     @-webkit-keyframes spin {
      100% {
         -webkit-transform: rotate(360deg);
       }
     }
     @keyframes spin {
       100% {
         -webkit-transform: rotate(360deg);
         transform: rotate(360deg);
       }
     }

@keyframes rotate {
    100% {
        transform: rotate(1turn);
    }
}

div{
   animation: rotate 4s linear infinite;
}