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; 
    } 
}