2013-04-05 159 views
0

虽然在Chrome中我的CSS3动画在Firefox和Safari中不起作用。 我使用此代码执行动画:CSS3兼容性问题

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和狩猎?

编辑:链接摆弄http://jsfiddle.net/AF4Ce/1/

回答

1

一个原因它可能无法在Firefox合作与预修正动画的顺序。始终将未加前缀的版本放在最后,这将允许浏览器始终尝试最后实现该版本。这很好,因为即使浏览器已经转向使用未加前缀的版本,前缀版本仍然可能会有一些链接的行为。

但是,这不仅仅是一个答案,而是我不知道它是否会解决它。您可能希望将代码放入JSFiddle(与图像一起),以便其他人可以准确看到您要做什么。

+0

感谢您的回答,这里是小提琴http://jsfiddle.net/AF4Ce/1/ – Manticore 2013-04-06 21:13:31

+1

好吧,所以我玩弄了小提琴,并且能够确认FireFox上没有任何事情发生。我能够为html元素添加边框颜色,并在-moz关键帧中更改它的颜色并将其视为动画效果。这告诉我们图像有问题。 经过一番搜索,我发现这个答案,它可能不会在FF中。 http://stackoverflow.com/questions/12685133/background-image-for-firefox-in-css3-animations 看起来你可能需要一个Javascript后备。 – Fernker 2013-04-08 16:06:26