Firefox Not Showing CSS3 Animations - css

Question

What's wrong with this (in Firefox)? In Chrome, everything works fairly smoothly (except for a small backflip wheni reaches a certain position. What am I doing wrong?
Keyframes:
#keyframes "grow" {
from {
-webkit-transform: scale(1);
-moz-transform: scale(1);
-o-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
}
to {
-webkit-transform: scale(2) rotate(180deg);
-moz-transform: scale(2) rotate(180deg);
-o-transform: scale(2) rotate(180deg);
-ms-transform: scale(2) rotate(180deg);
transform: scale(2) rotate(180deg);
}
}
#-moz-keyframes grow {
from {
-moz-transform: scale(1);
transform: scale(1);
}
to {
-moz-transform: scale(2) rotate(180deg);
transform: scale(2) rotate(180deg);
}
}
#-webkit-keyframes "grow" {
from {
-webkit-transform: scale(1);
transform: scale(1);
}
to {
-webkit-transform: scale(2) rotate(180deg);
transform: scale(2) rotate(180deg);
}
}
#-ms-keyframes "grow" {
from {
-ms-transform: scale(1);
transform: scale(1);
}
to {
-ms-transform: scale(2) rotate(180deg);
transform: scale(2) rotate(180deg);
}
}
#-o-keyframes "grow" {
from {
-o-transform: scale(1);
transform: scale(1);
}
to {
-o-transform: scale(2) rotate(180deg);
transform: scale(2) rotate(180deg);
}
}
#keyframes "spin" {
from {
-webkit-transform: scale(2) rotate(0deg);
-moz-transform: scale(2) rotate(0deg);
-o-transform: scale(2) rotate(0deg);
-ms-transform: scale(2) rotate(0deg);
transform: scale(2) rotate(0deg);
}
to {
-webkit-transform: scale(2) rotate(360deg);
-moz-transform: scale(2) rotate(360deg);
-o-transform: scale(2) rotate(360deg);
-ms-transform: scale(2) rotate(360deg);
transform: scale(2) rotate(360deg);
}
}
#-moz-keyframes spin {
from {
-moz-transform: scale(2) rotate(0deg);
transform: scale(2) rotate(0deg);
}
to {
-moz-transform: scale(2) rotate(360deg);
transform: scale(2) rotate(360deg);
}
}
#-webkit-keyframes "spin" {
from {
-webkit-transform: scale(2) rotate(0deg);
transform: scale(2) rotate(0deg);
}
to {
-webkit-transform: scale(2) rotate(360deg);
transform: scale(2) rotate(360deg);
}
}
#-ms-keyframes "spin" {
from {
-ms-transform: scale(2) rotate(0deg);
transform: scale(2) rotate(0deg);
}
to {
-ms-transform: scale(2) rotate(360deg);
transform: scale(2) rotate(360deg);
}
}
#-o-keyframes "spin" {
from {
-o-transform: scale(2) rotate(0deg);
transform: scale(2) rotate(0deg);
}
to {
-o-transform: scale(2) rotate(360deg);
transform: scale(2) rotate(360deg);
}
}
I then applied to specific elements:
.radial_div_item img:hover {
-webkit-animation: spin 1s infinite linear, grow .5s 1 linear;
-moz-animation: spin 1s infinite linear, grow .5s 1 linear;
-ms-animation: spin 1s infinite linear, grow .5s 1 linear;
-o-animation: spin 1s infinite linear, grow .5s 1 linear;
animation: spin 1s infinite linear, grow .5s 1 linear;
}
HTML for icons:
<div class="radial_div" style="position: relative">
<div class="radial_div_item" style="position: absolute; left: 155px; top: -5px;"><img src="img/menu/fb.png" title="Like Us on Facebook!" width="48" /></div>
<div class="radial_div_item" style="position: absolute; left: 315px; top: 85px;"><img src="img/menu/twit.png" title="Follow Us on Twitter!" width="48" /></div>
<div class="radial_div_item" style="position: absolute; left: 315px; top: 280px;"><img src="img/menu/plus.png" title="Add Us on Google+!" width="48" /></div>
<div class="radial_div_item" style="position: absolute; left: 155px; top: 370px;"><img src="img/menu/prj.png" title="Our Project Directory!" width="48" /></div>
<div class="radial_div_item" style="position: absolute; left: -15px; top: 280px;"><img id="contactOpener" src="img/menu/mail.png" title="Contact Us!" width="48" /></div>
<div class="radial_div_item" style="position: absolute; left: -27px; top: 75px;"><img src="img/menu/hub.png" title="Check Out Our GitHub!" width="72" /></div>
</div>
Any ideas?

Answer 1

CSS3 animations are supported in only Mozilla 16 or higher.So I would probably recommend you to reconsider your Mozilla version.
Also I don't know it would help but please look into you code
#-moz-keyframes grow should rather be #-moz-keyframes "grow".You missed out the "".Hope it works out for you.