Question

我一直在尝试使用css3动画在页面加载上旋转图标。该图标在Chrome和IE 9+中旋转，但它在firefox版本44上无效。我将非常感谢您的帮助。这是我的代码：

<div class="pageloading-mask"><div>

.pageloading-mask div {
    background: none !important;
    width: 20px;
    height: 20px;
    margin: 50px auto;
    position: relative !important;
    background: none !important;
}

.pageloading-mask div:before {
    content: "LOADING..";
    color: #038A3B; 
    position: absolute;
    top: 350px !important;
    transform: translateY(-50%) !important;   
}

.pageloading-mask div:after {
    content: "\e602";
    font-family: AlbourneGlyph;
    font-size: 80px;
    position: absolute;
    -webkit-animation: spin 2s infinite ease-in-out;
    -moz-animation: spin 2s infinite ease-in-out;   
    animation: spin 2s infinite ease-in-out;
    color: #038A3B;
    top: 200px !important;
    transform: translateY(-50%) !important;     
}

@keyframes spin {
    from { transform: scale(1) rotate(0deg); }
    to { transform: scale(1) rotate(360deg); }
}

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

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

Answer 1

只需删除此行transform: translateY(-50%) !important;，它就会像这里一样工作：

＆＃13;

.pageloading-mask div {
  background: none !important;
  width: 20px;
  height: 20px;
  margin: 50px auto;
  position: relative !important;
  background: none !important;
}
.pageloading-mask div:before {
  content: "LOADING..";
  color: #038A3B;
  position: absolute;
  top: 350px !important;
  transform: translateY(-50%) !important;
}
.pageloading-mask div:after {
  content: "\e602";
  font-family: AlbourneGlyph;
  font-size: 80px;
  position: absolute;
  -webkit-animation: spin 2s infinite 0s ease-in-out;
  -moz-animation: spin 2s infinite 0s ease-in-out;
  animation: spin 2s infinite 0s ease-in-out;
  color: #038A3B;
  top: 200px !important;
}
@-webkit-keyframes spin {
  from {
    -webkit-transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(360deg);
  }
}
@-moz-keyframes spin {
  from {
    -moz-transform: rotate(0deg);
  }
  to {
    -moz-transform: rotate(360deg);
  }
}
@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

＆＃13;

<div class="pageloading-mask">
  <div></div>
</div>

＆＃13;

Answer 2

请参阅此处： jsfiddle

在您撰写-moz-keyframes的{{1}}内，您需要使用-webkit-transform

并且不要在-moz-transform

上使用!important

代码：

transform: translateY(-50%)

也。一定要正确编写HTML：

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

在mozzila firefox中测试过。让我知道它是否有效

Css3动画无法在firefox版本44中运行

2 个答案: