0

尽管在 Chrome 中，我的 CSS3 动画在 Firefox 和 Safari 中不起作用。我正在使用此代码执行动画：

html {
    background:#262930 url('./images/pw_maze_black.png') no-repeat left top fixed;
    background-size:cover;

    animation:slides 60s; 
    animation-iteration-count: infinite;
    -moz-animation:slides 60s; 
    -moz-animation-iteration-count: infinite;
    -webkit-animation:slides 60s; 
    -webkit-animation-iteration-count: infinite;
    }

这是动画本身（对于每个浏览器）：

@keyframes slides
{
0%   {background:url('./images/addix/slide_bg/1.jpg') no-repeat top center;}
6%   {background:url('./images/addix/slide_bg/1.jpg') no-repeat top center;}
12%  {background:url('./images/addix/slide_bg/2.jpg') no-repeat top center;}
18%  {background:url('./images/addix/slide_bg/2.jpg') no-repeat top center;}
25%  {background:url('./images/addix/slide_bg/3.jpg') no-repeat top center;}
31%  {background:url('./images/addix/slide_bg/3.jpg') no-repeat top center;}
37%  {background:url('./images/addix/slide_bg/4.jpg') no-repeat top center;}
43%  {background:url('./images/addix/slide_bg/4.jpg') no-repeat top center;}
50%  {background:url('./images/addix/slide_bg/5.jpg') no-repeat top center;}
56%  {background:url('./images/addix/slide_bg/5.jpg') no-repeat top center;}
62%  {background:url('./images/addix/slide_bg/6.jpg') no-repeat top center;}
68%  {background:url('./images/addix/slide_bg/6.jpg') no-repeat top center;}
75%  {background:url('./images/addix/slide_bg/7.jpg') no-repeat top center;}
81%  {background:url('./images/addix/slide_bg/7.jpg') no-repeat top center;}
87%  {background:url('./images/addix/slide_bg/8.jpg') no-repeat top center;}
93%  {background:url('./images/addix/slide_bg/8.jpg') no-repeat top center;}
100% {background:url('./images/addix/slide_bg/1.jpg') no-repeat top center;}
}
@-moz-keyframes slides /* Firefox */
{
0%   {background:url('./images/addix/slide_bg/1.jpg') no-repeat top center;}
6%   {background:url('./images/addix/slide_bg/1.jpg') no-repeat top center;}
12%  {background:url('./images/addix/slide_bg/2.jpg') no-repeat top center;}
18%  {background:url('./images/addix/slide_bg/2.jpg') no-repeat top center;}
25%  {background:url('./images/addix/slide_bg/3.jpg') no-repeat top center;}
31%  {background:url('./images/addix/slide_bg/3.jpg') no-repeat top center;}
37%  {background:url('./images/addix/slide_bg/4.jpg') no-repeat top center;}
43%  {background:url('./images/addix/slide_bg/4.jpg') no-repeat top center;}
50%  {background:url('./images/addix/slide_bg/5.jpg') no-repeat top center;}
56%  {background:url('./images/addix/slide_bg/5.jpg') no-repeat top center;}
62%  {background:url('./images/addix/slide_bg/6.jpg') no-repeat top center;}
68%  {background:url('./images/addix/slide_bg/6.jpg') no-repeat top center;}
75%  {background:url('./images/addix/slide_bg/7.jpg') no-repeat top center;}
81%  {background:url('./images/addix/slide_bg/7.jpg') no-repeat top center;}
87%  {background:url('./images/addix/slide_bg/8.jpg') no-repeat top center;}
93%  {background:url('./images/addix/slide_bg/8.jpg') no-repeat top center;}
100% {background:url('./images/addix/slide_bg/1.jpg') no-repeat top center;}
}
@-webkit-keyframes slides /* Safari and Chrome */
{
0%   {background:url('./images/addix/slide_bg/1.jpg') no-repeat top center;}
6%   {background:url('./images/addix/slide_bg/1.jpg') no-repeat top center;}
12%  {background:url('./images/addix/slide_bg/2.jpg') no-repeat top center;}
18%  {background:url('./images/addix/slide_bg/2.jpg') no-repeat top center;}
25%  {background:url('./images/addix/slide_bg/3.jpg') no-repeat top center;}
31%  {background:url('./images/addix/slide_bg/3.jpg') no-repeat top center;}
37%  {background:url('./images/addix/slide_bg/4.jpg') no-repeat top center;}
43%  {background:url('./images/addix/slide_bg/4.jpg') no-repeat top center;}
50%  {background:url('./images/addix/slide_bg/5.jpg') no-repeat top center;}
56%  {background:url('./images/addix/slide_bg/5.jpg') no-repeat top center;}
62%  {background:url('./images/addix/slide_bg/6.jpg') no-repeat top center;}
68%  {background:url('./images/addix/slide_bg/6.jpg') no-repeat top center;}
75%  {background:url('./images/addix/slide_bg/7.jpg') no-repeat top center;}
81%  {background:url('./images/addix/slide_bg/7.jpg') no-repeat top center;}
87%  {background:url('./images/addix/slide_bg/8.jpg') no-repeat top center;}
93%  {background:url('./images/addix/slide_bg/8.jpg') no-repeat top center;}
100% {background:url('./images/addix/slide_bg/1.jpg') no-repeat top center;}
}

是我的错还是 Firefox 和 Safari 的错？

编辑：链接到小提琴http://jsfiddle.net/AF4Ce/1/

4

1 回答 1

1

它可能无法在 Firefox 中运行的一个原因是带有前缀的动画的顺序。始终将无前缀版本放在最后，这将允许浏览器始终尝试最后实现该版本。这很好，因为有时前缀版本仍然可以链接一些行为，即使浏览器已经开始使用无前缀版本。

但这更像是一个建议而不是一个答案，因为我不知道它是否会解决它。您可能希望将您的代码（连同图像）放入 JSFiddle 中，以便其他人可以准确地看到您正在尝试做什么。

于 2013-04-05T16:54:57.070 回答