CSS3 动画适用于 Chrome 而不是 Firefox

Question

我无法弄清楚为什么这在 Chrome 中有效，但在 Firefox 中无效。

我的代码:

#header3{
    background: url(/images/mynecraft/clouds3.png) repeat-x center 20px;
    -webkit-animation-name:cloud-crawl-header3;
    -webkit-animation-duration: 120s;
    -webkit-animation-timing-function:linear;
    -webkit-animation-iteration-count:infinite;
    -moz-animation-name:cloud-crawl-header3;
    -moz-animation-duration:120s;
    -moz-animation-timing-function:linear;
    -moz-animation-iteration-count:infinite;
}
@-webkit-keyframes cloud-crawl-header3{
        from{background-position: -100% 20px, center top}to{background-position: 100% 20px, center top}
}
@-moz-keyframes cloud-crawl-header3{
        from{background-position: -100% 20px, center top}to{background-position: 100% 20px, center top}
}

它有什么问题？

Answer 1

为什么你有两组background-position这样的位置:-100% 20px, center top？

我认为应该是:

@-webkit-keyframes cloud-crawl-header3 {
    from {
        background-position: -100% 20px;
    }
    to { 
        background-position: 100% 20px;
    }
}

@-moz-keyframes cloud-crawl-header3 {
    from {
        background-position: -100% 20px;
    }
    to { 
        background-position: 100% 20px;
    }
}