Firefox CSS3 动画根本不起作用

Question

所以我坚持我的动画代码做错了什么。我有

-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。

Answer 1

哦，我知道答案了！几周前我实际上遇到了这个问题，所以动画没有任何问题，但 background-position-x 样式。我想这实际上不是一种真正的风格（尽管有几个浏览器允许你使用它）。 Firefox 根本不支持它。所以你必须做 background-position: x y 当你只想改变 X 时，总是要把 y 放在那里很烦人。

Answer 2

问题在于您使用了非法属性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 */
    }
}