我正在尝试编写一个简单的 CSS 淡入淡出动画，在 4 个不同的图像之间转换，但它在任何版本的 Firefox(我正在 v.30 上测试它)、Internet Explorer 或 Opera 中都不起作用。不过，它在 Chrome 和 Safari 中运行良好。
我到处都看过类似的问题，但遗憾的是没有有效的解决方案。非常奇怪的是，我有一个更复杂的交叉淡入淡出动画，它使用缓入和缓出在图像之间工作和转换，并且在所有浏览器上都工作得很好。 (稍后我可能会发布以供引用)
我已经在使用和不使用标记的情况下对各个浏览器进行了尝试，结果相同。另外，我听说通用标记应该始终放在最后，但这样做会产生相同的结果。
HTML:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="crossfade.css">
</head>
<div id="crossfade">
</div>
</html>
CSS:
#crossfade {
width: 1000px;
height: 200px;
-webkit-backface-visibility: hidden;
-webkit-animation: myfirst 30s infinite; /* Chrome, Safari, Opera */
-moz-animation: myfirst 30s infinite ;
-o-animation: myfirst 30s infinite;
-ms-animation: myfirst 30s infinite;
animation: myfirst 30s infinite;
}
@-webkit-keyframes myfirst {
0% {background-image:url('images/summerbg1.png');}
35% {background-image:url('images/summerbg2.png');}
75% {background-image:url('images/summerbg3.png');}
100% {background-image:url('images/summerbg4.png');}
}
@-moz-keyframes myfirst {
0% {background-image:url('images/summerbg1.png');}
35% {background-image:url('images/summerbg2.png');}
75% {background-image:url('images/summerbg3.png');}
100% {background-image:url('images/summerbg4.png');}
}
@-o-keyframes myfirst {
0% {background-image:url('images/summerbg1.png');}
35% {background-image:url('images/summerbg2.png');}
75% {background-image:url('images/summerbg3.png');}
100% {background-image:url('images/summerbg4.png');}
}
@-ms-keyframes myfirst {
0% {background-image:url('images/summerbg1.png');}
35% {background-image:url('images/summerbg2.png');}
75% {background-image:url('images/summerbg3.png');}
100% {background-image:url('images/summerbg4.png');}
}
@keyframes myfirst {
0% {background-image:url('images/summerbg1.png');}
35% {background-image:url('images/summerbg2.png');}
75% {background-image:url('images/summerbg3.png');}
100% {background-image:url('images/summerbg4.png');}
}
最佳答案
根据 Rob 的建议，这是我使用图形标签而不是 div 所做的。它看起来与动画几乎完全一样，但适用于 IE、Firefox、Chrome、Opera 和 Safari。 (但是，我没有在早于 8 的 IE 版本上对此进行测试)。
HTML:
<html>
<head>
<title>Site</title>
<link rel="stylesheet" type="text/css" href="crossfade.css">
</head>
<div id="xfade">
<figure>
<img src="Summer/images/summerbg1.png" />
</figure>
<figure>
<img src="Summer/images/summerbg2.png" />
</figure>
<figure>
<img src="Summer/images/summerbg3.png" />
</figure>
<figure>
<img src="Summer/images/summerbg4.png" />
</figure>
</div>
</html>
CSS:
#xfade{
position: relative;
max-width: 1000px;
height: 200px;
margin: 0 auto;
}
#xfade figure{
margin: 0 auto;
max-width: 1000px;
height: 200px;
position: absolute;
}
#xfade img{
width: 1000px;
height: 200px;
}
#xfade figure{
opacity:0;
}
figure:nth-child(1) {
animation: xfade 48s 0s infinite;
-moz-animation: xfade 48s 0s infinite; /* Firefox */
-webkit-animation: xfade 48s 0s infinite; /* Safari and Chrome */
-o-animation: xfade 48s 0s infinite;
}
figure:nth-child(2) {
animation: xfade 48s 12s infinite;
-moz-animation: xfade 48s 12s infinite; /* Firefox */
-webkit-animation: xfade 48s 12s infinite; /* Safari and Chrome */
-o-animation: xfade 48s 12s infinite;
}
figure:nth-child(3) {
animation: xfade 48s 24s infinite;
-moz-animation: xfade 48s 24s infinite; /* Firefox */
-webkit-animation: xfade 48s 24s infinite; /* Safari and Chrome */
-o-animation: xfade 48s 24s infinite;
}
figure:nth-child(4) {
animation: xfade 48s 36s infinite;
-moz-animation: xfade 48s 36s infinite; /* Firefox */
-webkit-animation: xfade 48s 36s infinite; /* Safari and Chrome */
-o-animation: xfade 48s 36s infinite;
}
@-webkit-keyframes xfade{ /* Safari and Chrome */
0%{
opacity: 0;
}
2%{
opacity: 1;
}
25% {
opacity: 1;
}
40%{
opacity: 0;
}
}
@-moz-keyframes xfade {
0%{
opacity: 0;
}
2%{
opacity: 1;
}
25% {
opacity: 1;
}
40%{
opacity: 0;
}
}
@-o-keyframes xfade {
0%{
opacity: 0;
}
2%{
opacity: 1;
}
25% {
opacity: 1;
}
40%{
opacity: 0;
}
}
@-ms-keyframes xfade {
0%{
opacity: 0;
}
2%{
opacity: 1;
}
25% {
opacity: 1;
}
40%{
opacity: 0;
}
}
@keyframes xfade{
0%{
opacity: 0;
}
2%{
opacity: 1;
}
25% {
opacity: 1;
}
40%{
opacity: 0;
}
}
关于css - 交叉淡入淡出动画在 Firefox、IE 或 Opera 中不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/24618296/