2
我得到了一个背景图片动画,它适用于Chrome,但不适用于Firefox和IE。你知道为什么吗?CSS 3动画在Chrome中工作,而不是在FF和IE中工作
我的CSS看起来像
#banner {
background-attachment: fixed;
background-color: #666;
background-image: url("../images/banner-1.jpg");
background-position: top center;
background-repeat: no-repeat;
background-size: cover;
animation-name: banner;
animation-duration: 15s;
animation-iteration-count: infinite;
-webkit-animation-name: banner;
-webkit-animation-duration: 20s;
-webkit-animation-iteration-count: infinite;
-moz-animation-name: banner;
-moz-animation-duration: 20s;
-moz-animation-iteration-count: infinite;
}
@keyframes banner {
0% { background-image: url(../images/banner-1.jpg); }
33% { background-image: url(../images/banner-2.jpg); }
60% { background-image: url(../images/banner-2.jpg); }
93% { background-image: url(../images/banner-3.jpg); }
}
@-moz-keyframes banner {
0% { background-image: url(../images/banner-1.jpg); }
33% { background-image: url(../images/banner-2.jpg); }
60% { background-image: url(../images/banner-2.jpg); }
93% { background-image: url(../images/banner-3.jpg); }
}
@-webkit-keyframes banner {
0% { background-image: url("../images/banner-1.jpg"); }
33% { background-image: url("../images/banner-2.jpg"); }
60% { background-image: url("../images/banner-2.jpg"); }
93% { background-image: url("../images/banner-3.jpg"); }
}
HTML部分是一个简单的一些内容
为什么动画一些浏览器的时机与其他浏览器不同? – 2015-04-04 08:25:08
小错,谢谢。但是,这并不能解决问题:( – pexmar 2015-04-04 13:19:55
,因为它只能在铬,更多的答案工作http://stackoverflow.com/questions/7318462/changing-background-image-with-css3-animations – user123321 2015-04-05 09:26:00