CSS Animations not working in Firefox - pseudo

Question

I have some CSS animations that will not work in Firefox. They are applied to a pseudo element (:after) and all work fine in every other browser.

The animations are applied here

:after
{
    display:block;
    background:url('../img/snow.png'), url('../img/snow2.png') ;
    -webkit-animation: snow 15s linear infinite;
    -moz-animation: snow 15s linear infinite;
    -ms-animation: snow 15s linear infinite;
    animation-name:snow;
    animation-duration:15s;
    animation-timing-function:linear;
    height:500px;
    width:100%;
    content:'';
    position:absolute;
    top:0;
    left:0;
}

And the animations themselves are here:

@-webkit-keyframes snow {
 0% {background-position: 0px 0px;}
 100% {background-position: 0px 1000px, 0 500px;}
}
@keyframes snow {
 0% {background-position: 0px 0px;}
 100% {background-position: 0px 1000px, 0 500px;}
}

@-moz-keyframes snow {
 0% {background-position: 0px 0px;}
 100% {background-position: 0px 1000px, 0 500px;}
}
@-ms-keyframes snow {
 0% {background-position: 0px 0px;}
 100% {background-position: 0px 1000px, 0 500px;}
}

Any help or advice would be greatly appreicated!

Can you please provide the jsFiddle for this? It makes it easy to work with it then..:-) — Pankaj Parashar, Dec 02 '13 at 12:04
you can see the live working example @ socialsanta.co - the snow should be animated but currently is not for Firefox. — Daniel Benzie, Dec 02 '13 at 12:19
This might put some light on your question http://stackoverflow.com/questions/7844520/css-animation-works-in-chrome-but-not-in-firefox and if not there are many SO thread.....plz research..... — Akki619, Dec 02 '13 at 12:28
I have researched and tried following all of the steps I could find ... the above isn't relevant as I have used s to signify unit for each of my declarations. — Daniel Benzie, Dec 02 '13 at 12:37

score 0 · Accepted Answer · answered Dec 03 '13 at 05:53

Your issue is that your keyframes have different-length lists for background-position. It looks like Gecko doesn't allow interpolation between different-length background-position lists. I filed https://bugzilla.mozilla.org/show_bug.cgi?id=945600

In the meantime, simply using

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

in your keyframes should make this work, I believe.

score -1 · Answer 2 · answered Dec 02 '13 at 11:54

-1

Sometimes if you have your firebug or any other web developer tool is turned on then CSS does not work.

answered Dec 02 '13 at 11:54

fscore

2,567
7
40
74

Honestly, it becomes the solution due to that. – fscore Dec 02 '13 at 12:07
Whenever my firebug is on and I try some action on the webpage, it doesnt work and when I turn it off, it works. @Akki619 – fscore Dec 02 '13 at 12:14
Hi - I was testing on a PC that doesn't have any dev tools on it. so this isn't the case unfortunately – Daniel Benzie Dec 02 '13 at 12:18

CSS Animations not working in Firefox - pseudo

2 Answers2