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

哦，我知道答案！几个星期前我实际上遇到了这个问题，所以动画没有问题，但背景位置x风格。我猜它实际上并不是真正的风格（虽然有几种浏览器可以让你使用它）。 Firefox根本不支持它。所以你必须做背景位置：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 */
    }
}

Firefox CSS3动画根本不起作用

2 个答案: