使用关键帧的 CSS 幻灯片适用于除 Safari 以外的所有浏览器答案

【问题标题】：CSS Slideshow Using Keyframes works in all browsers except Safari使用关键帧的 CSS 幻灯片适用于除 Safari 以外的所有浏览器
【发布时间】：2015-06-17 01:59:30
【问题描述】：

毫无疑问，我正在处理我的无知问题，但我有一个使用关键帧的基于 CSS 的幻灯片的简短代码示例（请参阅适用于 Chrome、FireFox 和 IE 的 JSFiddle (https://jsfiddle.net/puwq00kb/8/) 11 但不是 Safari (v8.0.6)。

使用 Safari 时绝对不会出现任何内容，但所有其他浏览器的图像都可以正常循环。有人知道我做错了什么吗？

一系列语句包含图像，时间由关键帧和第 n 个子语句控制。

<div class="RevolvingImages">
   <figure>
      <img src="http://themarklee.com/wp-content/uploads/2013/10/class-header-css3.jpg" height="262">
   </figure>
   <figure>
       <img src="http://themarklee.com/wp-content/uploads/2013/10/class-header-semantics.jpg" height="262">
   </figure>
</div>

其余部分在 CSS 中完成。封闭的 DIV 只是放置内容：

.RevolvingImages {
   position: relative;
   top: 100px;
   left: 40px;
   max-width: 350px;
   height: 262px;
}

这些数字堆叠在一起：

.RevolvingImages figure {
   max-width: 350px;
   height: 262px;
   background: #000;
   position: absolute;
}

相对时间在 CSS 中设置如下：

figure:nth-child(1) {
   animation: xfade 6s 3s infinite;
   z-index:20;
}
figure:nth-child(2) {
   animation: xfade 6s 0s infinite;
   z-index:10;
}

图像之间的淡入淡出是通过关键帧在 CSS 中完成的：

@keyframes xfade {
   0% {
   opacity:1;
   }
   48% {
   opacity:1;
   }
   50% {
   opacity:0;
   }
   98% {
   opacity:0;
   }
   100% {
   opacity:1;
   }
}

谢谢！

【问题讨论】：

标签： slideshow css-animations keyframe

【解决方案1】：

我偶然发现了一个解决方案，但它很难看（代码的集中化受到损害）。

在每个 nth-child 语句中，我添加了一个 -webkit 语句，如下所示

figure:nth-child(1) {
   -webkit-animation: xfade 6s 3s infinite;
   -moz-animation: xfade 6s 3s infinite;
   -ms-animation: xfade 6s 3s infinite;
   animation: xfade 6s 3s infinite;
   z-index:20;
}

此外，除了 CSS 中的 @keyframe 部分之外，我还添加了一个附加部分，如下所示：

@-webkit-keyframes "xfade" {
   0% {
       filter:alpha(opacity=100);
       opacity:1;
   }
   48% {
       filter:alpha(opacity=100);
       opacity:1;
   }
   50% {
        filter:alpha(opacity=0);
        opacity:0;
   }
   98% {
       filter:alpha(opacity=0);
       opacity:0;
   }
   100% {
       filter:alpha(opacity=100);
       opacity:1;
   }
}

为 -moz 和 -ms 创建了类似的部分以涵盖大多数浏览器。

【讨论】：