CODEWITHSUNDEEP
htmlcss
user3178681
user3178681

Reputation: 63

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

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

Upvotes: 0

Views: 1903

Answers (1)

Naruto Dev
Naruto Dev

Reputation: 1003

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

Upvotes: 3

Related Questions