[英]CSS Animations not working in Firefox - pseudo
我有一些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;}
}
任何帮助或建议将不胜感激!
您的问题是关键帧具有用于背景位置的不同长度的列表。 看起来Gecko不允许在不同长度的背景位置列表之间进行插值。 我提交了https://bugzilla.mozilla.org/show_bug.cgi?id=945600
在此期间,只需使用
0% {background-position: 0px 0px, 0px 0px;}
我相信,在您的关键帧中应该可以完成这项工作。
有时,如果您打开了萤火虫或其他任何Web开发人员工具都已打开,则CSS无法正常工作。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.