Css3 Animation Not Working On Firefox But Working On Chrome

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

Solution 1:

change @keyframes to this:

@keyframes rotate {
        from { background-position: 00; }  // changed position-x toposition: 00
        to { background-position: 86px0; }
    }

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 5px017px0pxrgb(5, 5, 5), inset -2px1px3px1pxrgba(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: 00; }
        to { background-position: 86px0; }
    }