CSS3兼容性问题

Question

我的CSS3动画在火狐和Safari中不起作用，但在Chrome中却不起作用。我使用下面的代码来执行动画：

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和Safaris的错？

编辑:链接到fiddle http://jsfiddle.net/AF4Ce/1/

Answer 1

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

但这更多的是一个建议，而不是一个答案，因为我不知道它是否能解决这个问题。您可能希望将代码(以及图像)放入JSFiddle中，这样其他人就可以确切地看到您正在尝试做什么。