Html CSS动画在Firefox中不起作用-伪

我有一些CSS动画在Firefox中不起作用。它们应用于伪元素（：after），并且在其他浏览器中都可以正常工作

动画应用于此处

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

动画本身在这里：

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

---

任何帮助或建议都将不胜感激

有时，如果您打开了firebug或任何其他web开发人员工具，那么CSS将无法工作

您的问题是，关键帧的背景位置具有不同的长度列表。看起来Gecko不允许在不同长度的背景位置列表之间进行插值。我归档

同时，简单地使用

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

---

在你的关键帧中，我相信这应该是可行的。

你能为此提供JSFIDLE吗？这使得使用它变得很容易…-）你可以看到实时工作示例@socialsanta.co-雪应该是动画的，但目前不适用于Firefox。这可能会对你的问题有所帮助，如果没有那么多线索的话……plz研究……我已经研究并尝试遵循我能找到的所有步骤。。。上述内容并不相关，因为我使用s来表示我的每个声明的单位。老实说，正因为如此，它才成为解决方案。每当我的firebug启动，我在网页上尝试一些操作时，它都不起作用，当我关闭它时，它就起作用了@我在一台没有任何开发工具的PC上测试。不幸的是，情况并非如此