CSS无限旋转动画

204

我想通过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旋转图标?


3
你可以添加自己的答案。其中包括来自jsFiddle演示内部的代码。 - thirtydot
10个回答

354

@-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>


14
一个问题,-moz--ms-前缀在-webkit-keyframes下是必要的吗?我认为只有Webkit会读取-webkit-keyframes,因此安全起见可以将它们删除。 - Bor691
3
我理解的是这不是理论上的完美,因为非厂商前缀的属性应该总是放在最后,以避免覆盖符合标准的行为。参考:http://css-tricks.com/ordering-css3-properties/ - user657199
好的。在编辑之前进行了检查。不是100%确定。 - user657199
如果您在使用Chrome时遇到问题,请检查是否已将display: inline-block设置在.rotating元素上。请参阅http://stackoverflow.com/a/10644233/3757139。 - Samuel
1
如果您正在使用PostCSS,请考虑使用autoprefixer来处理所有跨浏览器问题,当仅使用transform时。 - Michał Pietraszko
显示剩余3条评论

109

工作得很好:

#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>


有没有跨浏览器的CSS解决方案可用? - andrej

36

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动画


如果你将那个旋转器更新为 flex-box,我会给你加分的...只需要将容器设置为 display:flex,内容居中,子元素设置 flex-basis。 - Ray Foss
@RayFoss 首先,谈到 flexbox,应该是 inline-flex。此外,为了解释无限动画,没有必要强调任何内容。还有,你说的孩子是什么孩子?你是否在期望的答案下评论了? - Roko C. Buljan

14

不带任何前缀,例如在它最简单的形式下:

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

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

12

适用于所有现代浏览器

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

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

div{
   animation: rotate 4s linear infinite;
}

4
你好,欢迎来到 Stack Overflow!当你回答问题时,你应该包括一些解释,比如作者做错了什么以及你是如何修复的。我之所以告诉你这些,是因为你的回答被标记为低质量,并正在接受审核。你可以通过点击“编辑”按钮来[编辑]你的回答。 - Federico Grandi

5

只需尝试这个。很好用。

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

#loading {
    width: 16px;
    height: 16px;
    -webkit-animation: loading 2s linear infinite;
    -moz-animation: loading 2s linear infinite;
}
<div class="loading-test">
    <svg id="loading" aria-hidden="true" focusable="false" role="presentation" class="icon icon-spinner" viewBox="0 0 20 20"><path d="M7.229 1.173a9.25 9.25 0 1 0 11.655 11.412 1.25 1.25 0 1 0-2.4-.698 6.75 6.75 0 1 1-8.506-8.329 1.25 1.25 0 1 0-.75-2.385z" fill="#919EAB"/></svg>
</div>


4

3

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

2
<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>

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接