Css3 animation not working in firefox version 44

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

add all your necessary code : HTML + all css required ( animation-declaration etc ) — Mihai T, Jul 18 '16 at 08:31

score 1 · Accepted Answer · answered Jul 18 '16 at 09:09

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>

score 0 · Answer 2 · answered Jul 18 '16 at 09:07

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

Css3 animation not working in firefox version 44

2 Answers2