Question

我在CSS中使用一些代码发布了幻灯片动画：https://gist.github.com/leemark/11237860为我的网站制作幻灯片。

幻灯片动画在我尝试的所有浏览器以及运行IOS 7的iPhone和iPad上运行良好。它在运行IOS 8的iPad上无效，我无法弄清楚原因。

这是CSS：

非常感谢！

/* http://themarklee.com/2013/10/16/simple-crossfading-slideshow-css/ */
.css-slideshow {
position: relative;
max-width: 495px;
height: 370px;
margin: 1em auto .5em auto;
font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
font-weight: 300;
}
.css-slideshow figure {
margin: 0;
max-width: 495px;
height: 370px;
background: #fff;
position: absolute;
}
.css-slideshow img {
-webkit-box-shadow: 0 0 2px #666;
box-shadow: 0 0 2px #666;
}
.css-slideshow figcaption {
position: absolute;
top: 5px;
color: #fff;
background: rgba(0,0,0, .3);
font-size: .8em;
padding: 8px 12px;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
opacity: 0;
-webkit-transition: opacity .5s;
-moz-transition: opacity .5s;
-o-transition: opacity .5s;
-ms-transition: opacity .5s;
transition: opacity .5s;
}
.css-slideshow:hover figure figcaption {
-webkit-transition: opacity .5s;
-moz-transition: opacity .5s;
-o-transition: opacity .5s;
-ms-transition: opacity .5s;
transition: opacity .5s;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: alpha(opacity=100);
opacity: 1;
}
.css-slideshow-attr {
max-width: 530px;
text-align: right;
font-size: .7em;
font-style: italic;
}
.css-slideshow-attr a {
color: #666;
}
.css-slideshow figure:nth-child(1),.css-slideshow figure:nth-child(2),.css-slideshow figure:nth-child(3),.css-slideshow figure:nth-child(4),.css-slideshow figure:nth-child(5),.css-slideshow figure:nth-child(6),.css-slideshow figure:nth-child(7) {
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
opacity: 0;
}
.css-slideshow figure:nth-child(1) {
-webkit-animation: xfade 48s 42s  infinite;
-moz-animation: xfade 48s 42s  infinite;
-ms-animation: xfade 48s 42s infinite;
-o-animation: xfade 48s 42s infinite;
animation: xfade 48s 42s infinite;
}
.css-slideshow figure:nth-child(2) {
-webkit-animation: xfade 48s 36s infinite;
-moz-animation: xfade 48s 36s infinite;
-ms-animation: xfade 48s 36s infinite;
-o-animation: xfade 48s 36s infinite;
animation: xfade 48s 36s infinite;
}
.css-slideshow figure:nth-child(3) {
-webkit-animation: xfade 48s 30s infinite;
-moz-animation: xfade 48s 30s infinite;
-ms-animation: xfade 48s 30s infinite;
-o-animation: xfade 48s 30s infinite;
animation: xfade 48s 30s infinite;
}
.css-slideshow figure:nth-child(4) {
-webkit-animation: xfade 48s 24s infinite;
-moz-animation: xfade 48s 24s infinite;
-ms-animation: xfade 48s 24s infinite;
-o-animation: xfade 48s 24s infinite;
animation: xfade 48s 24s infinite;
}
.css-slideshow figure:nth-child(5) {
-webkit-animation: xfade 48s 18s infinite;
-moz-animation: xfade 48s 18s infinite;
-ms-animation: xfade 48s 18s infinite;
-o-animation: xfade 48s 18s infinite;
animation: xfade 48s 18s infinite;
}
.css-slideshow figure:nth-child(6) {
-webkit-animation: xfade 48s 12s infinite;
-moz-animation: xfade 48s 12s infinite;
-ms-animation: xfade 48s 12s infinite;
-o-animation: xfade 48s 12s infinite;
animation: xfade 48s 12s infinite;
}
.css-slideshow figure:nth-child(7) {
-webkit-animation: xfade 48s 6s infinite;
-moz-animation: xfade 48s 6s infinite;
-ms-animation: xfade 48s 6s infinite;
-o-animation: xfade 48s 6s infinite;
animation: xfade 48s 6s infinite;
}
.css-slideshow figure:nth-child(8) {
-webkit-animation: xfade 48s 0s infinite;
-moz-animation: xfade 48s 0s infinite;
-ms-animation: xfade 48s 0s infinite;
-o-animation: xfade 48s 0s infinite;
animation: xfade 48s 0s infinite;
}
@keyframes "xfade" {
 0% {
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
   	filter: alpha(opacity=100);
   	opacity: 1;
 }
14.67% {
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
	filter: alpha(opacity=100);
	opacity: 1;
}
16.67% {
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
	filter: alpha(opacity=0);
	opacity: 0;
}
 98% {
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
   	filter: alpha(opacity=0);
   	opacity: 0;
 }
 100% {
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
   	filter: alpha(opacity=100);
   	opacity: 1;
 }
}
@-moz-keyframes xfade {
 0% {
   filter: alpha(opacity=100);
   opacity: 1;
 }
14.67% {
	filter: alpha(opacity=100);
	opacity: 1;
}
16.67% {
	filter: alpha(opacity=0);
	opacity: 0;
}
 98% {
   filter: alpha(opacity=0);
   opacity: 0;
 }
 100% {
   filter: alpha(opacity=100);
   opacity: 1;
 }
}
@-webkit-keyframes "xfade" {
 0% {
   filter: alpha(opacity=100);
   opacity: 1;
 }
14.67% {
	filter: alpha(opacity=100);
	opacity: 1;
}
16.67% {
	filter: alpha(opacity=0);
	opacity: 0;
}
 98% {
   filter: alpha(opacity=0);
   opacity: 0;
 }
 100% {
   filter: alpha(opacity=100);
   opacity: 1;
 }
}
@-ms-keyframes "xfade" {
 0% {
   -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
   filter: alpha(opacity=100);
   opacity: 1;
 }
14.67% {
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
	filter: alpha(opacity=100);
	opacity: 1;
}
16.67% {
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
	filter: alpha(opacity=0);
	opacity: 0;
}
 98% {
   -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
   filter: alpha(opacity=0);
   opacity: 0;
 }
 100% {
   -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
   filter: alpha(opacity=100);
   opacity: 1;
 }
}
@-o-keyframes "xfade" {
 0% {
   filter: alpha(opacity=100);
   opacity: 1;
 }
14.67% {
	filter: alpha(opacity=100);
	opacity: 1;
}
16.67% {
	filter: alpha(opacity=0);
	opacity: 0;
}
 98% {
   filter: alpha(opacity=0);
   opacity: 0;
 }
 100% {
   filter: alpha(opacity=100);
   opacity: 1;
 }
}

Answer 1

主要问题是关键帧名称周围的引号：@-webkit-keyframes "xfade"。它应该是@-webkit-keyframes xfade。

一般观察

不需要IE不透明度过滤器，opacity属性为supported IE9 +，CSS动画为only supported in IE10 +，因此如果动画被识别，则支持opacity属性
You only really require the -webkit- prefix for CSS animations，删除其他前缀属性并提高CSS的可读性 - 这有助于防止错误
未加前缀的@keyframes应位于-webkit-前缀关键帧之后，因此支持的浏览器将使用该标准。

完整示例

我还没有在iOS中对此进行过测试，但我相信这应该没有问题。

.css-slideshow {
  position: relative;
  max-width: 495px;
  height: 370px;
  margin: 1em auto .5em auto;
  font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
  font-weight: 300;
}
.css-slideshow figure {
  margin: 0;
  max-width: 495px;
  height: 370px;
  background: #fff;
  position: absolute;
}
.css-slideshow img {
  box-shadow: 0 0 2px #666;
}
.css-slideshow figcaption {
  position: absolute;
  top: 5px;
  color: #fff;
  background: rgba(0, 0, 0, .3);
  font-size: .8em;
  padding: 8px 12px;
  opacity: 0;
  transition: opacity .5s;
}
.css-slideshow:hover figure figcaption {
  transition: opacity .5s;
  opacity: 1;
}
.css-slideshow-attr {
  max-width: 530px;
  text-align: right;
  font-size: .7em;
  font-style: italic;
}
.css-slideshow-attr a {
  color: #666;
}
.css-slideshow figure {
  opacity: 0;
}
.css-slideshow figure:nth-child(1) {
  -webkit-animation: xfade 48s 42s infinite;
  animation: xfade 48s 42s infinite;
}
.css-slideshow figure:nth-child(2) {
  -webkit-animation: xfade 48s 36s infinite;
  animation: xfade 48s 36s infinite;
}
.css-slideshow figure:nth-child(3) {
  -webkit-animation: xfade 48s 30s infinite;
  animation: xfade 48s 30s infinite;
}
.css-slideshow figure:nth-child(4) {
  -webkit-animation: xfade 48s 24s infinite;
  animation: xfade 48s 24s infinite;
}
.css-slideshow figure:nth-child(5) {
  -webkit-animation: xfade 48s 18s infinite;
  animation: xfade 48s 18s infinite;
}
.css-slideshow figure:nth-child(6) {
  -webkit-animation: xfade 48s 12s infinite;
  animation: xfade 48s 12s infinite;
}
.css-slideshow figure:nth-child(7) {
  -webkit-animation: xfade 48s 6s infinite;
  animation: xfade 48s 6s infinite;
}
.css-slideshow figure:nth-child(8) {
  -webkit-animation: xfade 48s 0s infinite;
  animation: xfade 48s 0s infinite;
}
@-webkit-keyframes xfade {
  0% {
    opacity: 1;
  }
  14.67% {
    opacity: 1;
  }
  16.67% {
    opacity: 0;
  }
  98% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes xfade {
  0% {
    opacity: 1;
  }
  14.67% {
    opacity: 1;
  }
  16.67% {
    opacity: 0;
  }
  98% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

<div class="css-slideshow">
  <figure>
    <img src="http://www.placehold.it/500/000000" width="495" height="370" />
    <figcaption><strong>Semantics:</strong> Giving meaning to...</figcaption>
  </figure>

  <figure>
    <img src="http://www.placehold.it/500/FF0000" width="495" height="370" />
    <figcaption><strong>Semantics:</strong> Giving meaning to...</figcaption>
  </figure>

  <figure>
    <img src="http://www.placehold.it/500/000000" width="495" height="370" />
    <figcaption><strong>Semantics:</strong> Giving meaning to...</figcaption>
  </figure>

  <figure>
    <img src="http://www.placehold.it/500/FF0000" width="495" height="370" />
    <figcaption><strong>Semantics:</strong> Giving meaning to...</figcaption>
  </figure>

  <figure>
    <img src="http://www.placehold.it/500/000000" width="495" height="370" />
    <figcaption><strong>Semantics:</strong> Giving meaning to...</figcaption>
  </figure>

  <figure>
    <img src="http://www.placehold.it/500/FF0000" width="495" height="370" />
    <figcaption><strong>Semantics:</strong> Giving meaning to...</figcaption>
  </figure>

  <figure>
    <img src="http://www.placehold.it/500/000000" width="495" height="370" />
    <figcaption><strong>Semantics:</strong> Giving meaning to...</figcaption>
  </figure>

  <figure>
    <img src="http://www.placehold.it/500/FF0000" width="495" height="370" />
    <figcaption><strong>Semantics:</strong> Giving meaning to...</figcaption>
  </figure>



</div>

CSS动画无法在IOS 8中运行（在IOS 7和一般情况下都很好）

1 个答案:

一般观察

完整示例