1

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

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

4

2 回答 2

1

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

于 2013-05-17T15:56:09.387 回答
1

问题是您使用的是非法属性，background-position-x而不是使用该background-position属性并且仅指定水平偏移量和垂直偏移量为 0。改变这将解决它：

例子

@keyframes wave {

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

    100% {
    background-position: 100% 0; /* Obviously do the same for the prefixes */
    }
}
于 2013-05-17T15:57:38.050 回答