Question

我有一些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;}
}

任何帮助或建议都会有很大帮助！

Answer 1

您的问题是您的关键帧具有不同长度的背景位置列表。看起来Gecko不允许在不同长度的背景位置列表之间进行插值。我提交了https://bugzilla.mozilla.org/show_bug.cgi?id=945600

与此同时，只需使用

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

我认为，你的关键帧中的

应该能够完成这项工作。

Answer 2

有时，如果您打开了firebug或任何其他Web开发人员工具，则CSS无效。

CSS动画无法在Firefox中运行 - 伪

2 个答案: