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

标签 html css firefox animation

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


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

最佳答案

您的问题是您的关键帧有不同长度的背景位置列表。壁虎似乎不允许在不同长度的背景位置列表之间进行插值。我提交了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/

相关文章:

javascript - 自动将 HTML 插入页面上某些点的代码?

html - 在我的网页的左侧和右侧放置装饰图片

html - 删除 Microsoft Edge 的电话号码样式

javascript - 悬停在下拉菜单上时,JQuery悬停下拉菜单消失

javascript - 火狐插件 : quit-application observer not working

html - 图像 srcset 大小

javascript - 单击事件生成行时,如何在<td>中的select选项中获取数组值?

html - 使 HTML div 更棒的方式

javascript - Firefox -- 在 SVG 中动态嵌入 <svg> 元素

jquery - jQuery隐藏/显示包含Highcharts的div