CODEWITHSUNDEEP
htmlcssfirefoxcss-animations
David
David

Reputation: 149

Firefox CSS3 animations not working at all

So I'm stuck on what I've done wrong with my animation code. I have

-webkit-animation: wave 200s linear 0s infinite;
-moz-animation: wave 200s linear 0s infinite;
animation: wave 200s linear 0s infinite;

and

    @keyframes wave {
    0% {
    background-position-x: 0%;
    }
    100% {
    background-position-x: 100%;
    }

    }

    @-moz-keyframes wave {
    0% {
    background-position-x: 0%;
    }
    100% {
    background-position-x: 100%;
    }

    }

    @-webkit-keyframes wave {
    0% {
        top: 20px;
    background-position-x: 0%;
 }
100% {
    top: 60px;
   background-position-x: 100%;
}

}

Now Chrome and Safari work just fine. As soon as I fire up firefox, this animation doesn't play at all. Is there a possibility I have just overlooked something here? I've been trying different methods all day and nothing seems to work. Any help is really appreciated! Thank you!

EDIT: Heres the jsfiddle. As you can see, it works on chrome but not on FF.

Upvotes: 1

Views: 1832

Answers (2)

Yana
Yana

Reputation: 319

The problem is that you're using an illegal property, background-position-x instead of using the background-position property and only specifying the horizontal offset and 0 for the vertical offset. Changing this will fix it:

Example

@keyframes wave {

    0% {
    background-position: 0% 0;
    }

    100% {
    background-position: 100% 0; /* Obviously do the same for the prefixes */
    }
}

Upvotes: 1

Fernker
Fernker

Reputation: 2288

Oooh I know the answer to this! I actually ran into this problem a few weeks back, so there's nothing wrong with the animation but the background-position-x style. I guess it's not actually a real style (although several browsers let you use it). Firefox doesn't support it at all. So you'll have to do background-position: x y which is annoying to always have to put the y in there when you only want to change the X.

Upvotes: 1

Related Questions