Firefox CSS3動畫根本不起作用

所以我被困在我做錯了我的動畫代碼。我有Firefox CSS3動畫根本不起作用

-webkit-animation: wave 200s linear 0s infinite; 
-moz-animation: wave 200s linear 0s infinite; 
animation: wave 200s linear 0s infinite;

和

@keyframes wave { 
    0% { 
    background-position-x: 0%; 
    } 
    100% { 
    background-position-x: 100%; 
    } 

    } 

    @-moz-keyframes wave { 
    0% { 
    background-position-x: 0%; 
    } 
    100% { 
    background-position-x: 100%; 
    } 

    } 

    @-webkit-keyframes wave { 
    0% { 
     top: 20px; 
    background-position-x: 0%; 
} 
100% { 
    top: 60px; 
    background-position-x: 100%; 
} 

}

現在，Chrome和Safari的工作就好了。只要我啓動firefox，這個動畫就根本不起作用。有沒有可能我在這裏忽略了一些東西？我一直在嘗試不同的方法，似乎沒有任何工作。任何幫助真的很感激！謝謝！

編輯：繼承人jsfiddle。正如你所看到的，它適用於Chrome，但不適用於FF。

來源

2013-05-17 David

任何機會，你可以扔在一起[的jsfiddle（http://jsfiddle.net）？ – Yana

給我幾分鐘。 – David

我把jsfiddle了。 – David

問題是你正在使用一個非法的屬性，background-position-x而不是使用background-position屬性和而只使用指定水平偏移量和0爲垂直偏移量。改變這將解決它：

Example

@keyframes wave { 

    0% { 
    background-position: 0% 0; 
    } 

    100% { 
    background-position: 100% 0; /* Obviously do the same for the prefixes */ 
    } 
}

來源

2013-05-17 15:57:38 Yana

嗯。雖然這似乎在我的Firefox中的jsfiddle工作，我的實際網站仍然無法工作......這樣的痛苦。我應該只是使用這個jQuery動畫？ – David

不 - 它應該工作正常 - 如果你發佈*所有*相關代碼我不介意看看:) – Yana

好繼承人新[小提琴]（http://jsfiddle.net/T3WMh/4/）與我正在使用的父母代碼。代碼在'li'中用於視差插件。 – David

Oooh我知道這個答案！實際上我幾周前遇到了這個問題，所以動畫沒有什麼問題，但是background-position-x樣式。我想這不是真正的風格（雖然有幾個瀏覽器讓你使用它）。 Firefox根本不支持它。所以你必須做背景位置：xy這是煩人的總是必須把y放在那裏，當你只想改變X.

來源

2013-05-17 15:56:09 Fernker

Firefox CSS3動畫根本不起作用

回答

相關問題