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