Css3アニメーションがfirefoxバージョン44で動作していません

Question

私はcss3アニメーションを使用してページの読み込み時にアイコンを回転させようとしています。アイコンはChromeとIE 9+にスピンが、私には理解されるFirefoxバージョン44で作業されていない、あなたのhelp.Hereが私のコードです：

<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

を動作するかどうか私に教えて：

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

Answer 2

こちらを参照してください。jsfiddle

あなたは -moz-transform

を使用する必要があり、使用しない代わりに-webkit-transformを書いた-moz-keyframes内部

また

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

：transform: translateY(-50%)

コードに!important。 htmlを正しく記述してください：

<div class="pageloading-mask"> 

<div></div> 
</div> 

mozzila firefoxでテストされています。それはちょうどこのラインtransform: translateY(-50%) !important;を削除し、それがここのように動作します