Css3 动画在 Firefox 版本 44 中不起作用

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; 它将像这里一样工作:

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

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