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!
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.
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments