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