Question

@keyframes myfirst {
    from {background-position: 4951px 0px ;}
    to {background-position: 0px 0px ;}
}
@-webkit-keyframes myfirst /* Safari and Chrome */ {
    from {background-position: 4951px 0px ;}
    to {background-position: 0px 0px ;}
}
@-moz-keyframes myfirst /* Safari and Chrome */ {
    from {background-position: 4951px 0px ;}
    to {background-position: 0px 0px ;}
}
@-o-keyframes myfirst /* Safari and Chrome */ {
    from {background-position: 4951px 0px ;}
    to {background-position: 0px 0px ;}
}
body {
    background: url('http://parisparcoeur.ch/test/wp-content/uploads/2013/11/Baord_Combo.jpg') repeat-x !important;
    -webkit-animation: myfirst 80s infinite; /* Safari and Chrome */
    animation: myfirst 80s infinite; 
    -moz-animation: myenter code herefirst 80s;
    background-size: auto 600px;
    min-height:960px;
}

所以这是我的代码，它在chrome和safari上运行得很好，但它在Firefox上不起作用。

网址 - http://parisparcoeur.ch/test/

Answer 1

啊，看起来这可能导致问题：@-moz-keyframes规则被称为myfirst，而您在myenter部分呼叫-moz-animation。也许如果你改为myfirst那么它会起作用吗？同时尝试将herefirst更改为infinity。

希望有所帮助：）

P.S。与你的问题没有关系，但是动画开始很快，但是在80秒结束时它以非常慢的速度爬行。要停止此操作，请将linear添加到动画规则中，如下所示：-webkit-animation: myfirst 80s infinite linear;。然后它将以相同的速度运行;）

Css3动画无法在Firefox中运行

1 个答案: