Crossfade 动画在 Firefox、IE 或 Opera 中不起作用答案

【问题标题】：Crossfade Animation Does Not Work in Firefox, IE, or OperaCrossfade 动画在 Firefox、IE 或 Opera 中不起作用
【发布时间】：2014-08-28 09:21:57
【问题描述】：

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

【问题讨论】：

您可以创建四个单独的 div（每个 bg 一个）并使用不透明度将它们淡入淡出。
根据 MDN background-image 是不可动画的，所以我很惊讶它在 chrome 中完全有效。 developer.mozilla.org/en-US/docs/Web/CSS/…
@RobErskine 我会考虑这样做并发布我的结果。

标签： css internet-explorer firefox opera

【解决方案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;
  }
}

【讨论】：