Question

我正在尝试编写一个简单的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');}
 }

Answer 1

根据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;
  }
}

Crossfade动画在Firefox，IE或Opera中不起作用

1 个答案: