146

我想通过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>

但这是行不通的。如何使用CSS旋转图标？

css animation webkit

— 亚历山大·鲁里奥夫（Alexander Ruliov）
source

3

建立的解决方案— jsfiddle.net/LwwfG请回答，以结束问题。

— Alexander Ruliov 2011年

3

您可以添加自己的答案。在其中，包括jsFiddle演示内部的代码。

— 2011年

263

@-webkit-keyframes rotating /* Safari and Chrome */ {
  from {
    -webkit-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes rotating {
  from {
    -ms-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  to {
    -ms-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
.rotating {
  -webkit-animation: rotating 2s linear infinite;
  -moz-animation: rotating 2s linear infinite;
  -ms-animation: rotating 2s linear infinite;
  -o-animation: rotating 2s linear infinite;
  animation: rotating 2s linear infinite;
}

<div 
  class="rotating"
  style="width: 100px; height: 100px; line-height: 100px; text-align: center;" 
 >Rotate</div>

展开摘要

— 柯克·斯特罗贝克
source

12

一个问题，是-moz-和-ms-前缀必要下-webkit-keyframes？因为只有webkit才会阅读，所以-webkit-keyframes我相信将其删除是安全的。

— Bor691 2014年

2

我是否正确理解了这在理论上并不完美，因为非供应商前缀的属性应始终位于最后，以免覆盖符合标准的行为？请参阅：css-tricks.com/ordering-css3-properties

凉。在编辑之前正在检查。不确定100％。

@Ricky-提示：当您已经与作者讨论过编辑内容时（如上所述），在“编辑评论”中提及它并不是一个坏主意。因此，编辑不被视为“激进的改变” ；-)

— Leigh

1

如果您使用的是PostCSS，请考虑仅在使用autoprefixer处理所有跨浏览器问题transform。

— 米哈尔Pietraszko

88

工作正常：

#test {
    width: 11px;
    height: 14px;
    background: url('data:image/gif;base64,R0lGOD lhCwAOAMQfAP////7+/vj4+Hh4eHd3d/v7+/Dw8HV1dfLy8ubm5vX19e3t7fr 6+nl5edra2nZ2dnx8fMHBwYODg/b29np6eujo6JGRkeHh4eTk5LCwsN3d3dfX 13Jycp2dnevr6////yH5BAEAAB8ALAAAAAALAA4AAAVq4NFw1DNAX/o9imAsB tKpxKRd1+YEWUoIiUoiEWEAApIDMLGoRCyWiKThenkwDgeGMiggDLEXQkDoTh CKNLpQDgjeAsY7MHgECgx8YR8oHwNHfwADBACGh4EDA4iGAYAEBAcQIg0Dk gcEIQA7');
}

@-webkit-keyframes rotating {
    from{
        -webkit-transform: rotate(0deg);
    }
    to{
        -webkit-transform: rotate(360deg);
    }
}

.rotating {
    -webkit-animation: rotating 2s linear infinite;
}

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

展开摘要

— 亚历山大·鲁里奥夫（Alexander Ruliov）
source

是否有可用的跨浏览器CSS解决方案？

— andrej

13

CSS中的无限旋转动画

/* ENDLESS ROTATE */
.rotate{
  animation: rotate 1.5s linear infinite; 
}
@keyframes rotate{
  to{ transform: rotate(360deg); }
}


/* SPINNER JUST FOR DEMO */
.spinner{
  display:inline-block; width: 50px; height: 50px;
  border-radius: 50%;
  box-shadow: inset -2px 0 0 2px #0bf;
}

<span class="spinner rotate"></span>

展开摘要

MDN-Web CSS动画

— 罗科·C·布尔扬
source

6

没有任何前缀，例如，这是最简单的：

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

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

— 多里安
source

5

适用于所有现代浏览器

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

— 卡里姆
source

1

<style>
div
{  
     height:200px;
     width:200px;
     -webkit-animation: spin 2s infinite linear;    
}
@-webkit-keyframes spin {
    0%  {-webkit-transform: rotate(0deg);}
    100% {-webkit-transform: rotate(360deg);}   
}

</style>
</head>

<body>
<div><img src="1.png" height="200px" width="200px"/></div>
</body>

— 普拉克
source

1

旋转添加类.active

  .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);
       }
     }

— DINESH Adhikari
source

1

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

div{
   animation: rotate 4s linear infinite;
}

— 维肯
source

3

嗨，欢迎来到Stack Overflow！当您回答问题时，您应该提供某种解释，例如作者做错了什么以及您为解决该问题所做的工作。我之所以这样告诉您，是因为您的回答被标记为低质量，目前正在接受审核。您可以通过单击“编辑”按钮来编辑答案。

— Federico Grandi

CSS无尽旋转动画

CSS中的无限旋转动画