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动画根本不起作用

回答

相关问题