Question

我毫不怀疑我处理的是我的无知，但我已经使用关键帧获得了基于CSS的幻灯片的简短代码示例（请参阅JSFiddle（https://jsfiddle.net/puwq00kb/8/）） Chrome，FireFox和IE 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;
   }
}

谢谢！

Answer 1

我偶然发现了一个解决方案，但这很难看（代码集中化了）。

在每个第n个子语句中，我添加了一个-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创建了类似的部分，以涵盖大多数浏览器。

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

1 个答案: