Question

我的CSS3动画虽然在Chrome中不适用于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和Safaris？

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

Answer 1

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

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

CSS3兼容性问题

1 个答案: