我有一些无法在 Firefox 中运行的 CSS 动画。它们应用于伪元素 (: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;}
}
如有任何帮助或建议,我们将不胜感激!
最佳答案
您的问题是您的关键帧具有不同长度的背景位置列表。看起来 Gecko 不允许在不同长度的背景位置列表之间进行插值。我提交了 https://bugzilla.mozilla.org/show_bug.cgi?id=945600
同时,简单地使用
0% {background-position: 0px 0px, 0px 0px;}
我相信,在你的关键帧中应该可以做到这一点。
关于html - CSS 动画在 Firefox 中不起作用 - 伪,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20327471/