CSS Spinner不旋转

Question

我正在使用带有以下标记的CSS微调器：

 .spinner { height: 25px; width: 25px; margin: 0 auto 0 auto; position: relative; -webkit-animation: rotation .6s infinite linear; -moz-animation: rotation .6s infinite linear; -o-animation: rotation .6s infinite linear; animation: rotation .6s infinite linear; border-left: 4px solid #fff; border-right: 4px solid #fff; border-bottom: 4px solid #fff; border-top: 4px solid #0F8254; border-radius: 100%; display: inline-block; vertical-align: middle; } 

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

在Firefox / Chrome / IE上的页面中的任何位置，它都不会旋转，并且如果我在Firefox中进行检查，则没有覆盖的属性。

Answer 1

您所指的是一种称为rotation的动画，但似乎尚未定义。 像这样添加它：

 .spinner { height: 25px; width: 25px; margin: 0 auto 0 auto; position: relative; -webkit-animation: rotation .6s infinite linear; -moz-animation: rotation .6s infinite linear; -o-animation: rotation .6s infinite linear; animation: rotation .6s infinite linear; border-left: 4px solid #fff; border-right: 4px solid #fff; border-bottom: 4px solid #fff; border-top: 4px solid #0F8254; border-radius: 100%; display: inline-block; vertical-align: middle; } /* TODO Add vendor prefixes if you need them */ @keyframes rotation { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } 

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

Answer 2

好像您没有在任何地方定义动画rotation

加

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

进入您的CSS，它将开始运行。

 .spinner { height: 25px; width: 25px; margin: 0 auto 0 auto; position: relative; -webkit-animation: rotation .6s infinite linear; -moz-animation: rotation .6s infinite linear; -o-animation: rotation .6s infinite linear; animation: rotation .6s infinite linear; border-left: 4px solid #fff; border-right: 4px solid #fff; border-bottom: 4px solid #fff; border-top: 4px solid #0F8254; border-radius: 100%; display: inline-block; vertical-align: middle; } @keyframes rotation { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } 

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

Answer 3

好的，我找到了缺少的部分，感谢您的反馈：

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

@-moz-keyframes rotation {
  from {
    -moz-transform: rotate(0deg);
  }
  to {
    -moz-transform: rotate(359deg);
  }
}

@-o-keyframes rotation {
  from {
    -o-transform: rotate(0deg);
  }
  to {
    -o-transform: rotate(359deg);
  }
}

@keyframes rotation {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(359deg);
  }
}