Css3 animation not working in firefox version 44 - css

Question

I've been trying to make an icon spin on page load using css3 animations. The icon spins in Chrome and IE 9+ but it is not working on firefox version 44. I would appreciate your help.Here is my code:
<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

Just remove this line transform: translateY(-50%) !important; and it will work like here:
.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

see here :jsfiddle
inside the -moz-keyframes you wrote -webkit-transform instead you need to use -moz-transform
and don't use !important on the transform: translateY(-50%)
code :
#-moz-keyframes spin {
from { -moz-transform: rotate(0deg); }
to { -moz-transform: rotate(360deg); }
}
also. be sure you write html correctly :
<div class="pageloading-mask">
<div></div>
</div>
tested in mozzila firefox . let me know if it works