CSS3 Animation not working on Firefox But working on chrome - html

Question

I am trying to make my animation work on firefox, Its working fine on google chrome but not in firefox or any other browser.
Here is the html markup
<div id="blo"></div>
and CSS sheet
#blo {
width: 44px;
height: 43px;
background: url(http://www.noirextreme.com/digital/Earth-Color4096.jpg);border-radius: 50%;
background-size: 86px, 43px;
box-shadow: inset 5px 0 17px 0px rgb(5, 5, 5), inset -2px 1px 3px 1px rgba(255, 255, 255, 0.2);
-webkit-animation-name: rotate;
-webkit-animation-duration: 4s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
-moz-animation-name: rotate;
-moz-animation-duration: 4s;
-moz-animation-iteration-count: infinite;
-moz-animation-timing-function: linear;
-ms-animation-name: rotate;
-ms-animation-duration: 4s;
-ms-animation-iteration-count: infinite;
-ms-animation-timing-function: linear;
animation-name: rotate;
animation-duration: 4s;
animation-iteration-count: infinite;
animation-timing-function: linear;
z-index: 9999;
position: relative;
#-webkit-keyframes rotate {
from { background-position-x: 0px; }
to { background-position-x: 86px; }
}
#-ms-keyframes rotate {
from { background-position-x: 0px; }
to { background-position-x: 86px; }
}
#-moz-keyframes rotate {
from { background-position-x: 0px; }
to { background-position-x: 86px; }
}
Fiddle: http://jsfiddle.net/J22TN/1/
#keyframes rotate {
from { background-position-x: 0px; }
to { background-position-x: 86px; }
}

Answer 1

change #keyframes to this:
#keyframes rotate {
from { background-position: 0 0; } // changed position-x to position: 0 0
to { background-position: 86px 0; }
}
And also, remove all the -moz- lines. #keyframe animations are directly supported by firefox!
Your Final CSS should be this:
#blo {
width: 44px;
height: 43px;
background: url(http://www.noirextreme.com/digital/Earth-Color4096.jpg);border-radius: 50%;
background-size: 86px, 43px;
box-shadow: inset 5px 0 17px 0px rgb(5, 5, 5), inset -2px 1px 3px 1px rgba(255, 255, 255, 0.2);
-webkit-animation-name: rotate;
-webkit-animation-duration: 4s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
animation-name: rotate;
animation-duration: 4s;
animation-iteration-count: infinite;
animation-timing-function: linear;
z-index: 9999;
position: relative;
}
#-webkit-keyframes rotate {
from { background-position-x: 0px; }
to { background-position-x: 86px; }
}
#keyframes rotate {
from { background-position: 0 0; }
to { background-position: 86px 0; }
}