HTML5 Animation working on Chrome but not Firefox

Question

The following is an earth globe that's rotating. Though this animation is working fine on Chrome, it doesn't work at all on Firefox, and it just stands still. Any help on how to solve this? JSFiddle.

<div id="page-wrapper">
        <div class="row">
                <div class="center-block img-responsive" id="earth"></div>
        </div>
    </div>



#earth {
    width: 100px;
    height: 100px;
    background: url('../images/Earth-Color.jpg');
    border-radius: 50%;
    background-size: 210px;
    box-shadow: inset 16px 0 40px 6px rgb(0, 0, 0),
        inset -3px 0 6px 2px rgba(255, 255, 255, 0.2);
    animation-name: rotate;
    animation-duration: 4s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    margin-top:200px;
}


@keyframes rotate {
  from { background-position-x: 0px; }
  to { background-position-x: 210px; }
}

Need Earth-Color.jpg to try it locally. Or may be you can provide a jsFiddle. — Saranga A, Mar 23 '16 at 07:33
`background-position-x` and `background-position-y` is an invention of google chrome, not a standard. It only works in chrome, not in internet explorer nor firefox. Use `background-position` instead to make it compatible with all browsers — Marcos Pérez Gude, Mar 23 '16 at 08:39
@mikeb Please accept my answer if you think it solved your problem. :) — Saranga A, Mar 24 '16 at 01:33

score 3 · Accepted Answer · edited May 23 '17 at 12:15

3

You need to set the background-position property as a whole in @keyframes

@keyframes rotate {
    from { background-position: 0px 0; }
    to { background-position: 210px 0; }
}

jsFiddle

background-position-x and background-position-y are not yet implemented in FireFox. But it seems like they will be added in future.

Another SO question on this

edited May 23 '17 at 12:15

Community

1
1

answered Mar 23 '16 at 08:13

Saranga A

1,091
16
22

HTML5 Animation working on Chrome but not Firefox

1 Answers1