Question

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

＆＃13;

TIME_HEAD CONTENT1
----blockfix1
----blockfix2
TIME_HEAD CONTENT2
----blockfix3
----blockfix4

＆＃13;

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

＆＃13;

在我放在页面中的任何地方，它都没有旋转，在Firefox / Chrome / IE上，如果我在Firefox中检查，则没有被覆盖的属性。

Answer 1

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

您似乎没有在任何地方定义动画rotation

添加

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

进入你的css，它将成为明星的工作。

＆＃13;

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

＆＃13;

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

＆＃13;

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

CSS Spinner不旋转

3 个答案: