Question

我正在我的网站上实施CSS幻灯片放映。我使用此CodePen作为指南：http://codepen.io/antoniskamamis/pen/hjBrE

我第一次遇到幻灯片放映在Safari中无法正常工作的问题。我能够通过添加适用于所有浏览器的动画延迟属性来解决该问题。我测试除了IE以外的所有浏览器，直到现在，由于某种原因，这个幻灯片放映在IE中不起作用。我可以看到演示（代码笔）实际上在IE中工作。

我添加的附加CSS来处理Safari中的动画会导致IE中断吗？如果有人有想法，那将非常感激！

＆＃13;

.slider {
  margin: 10px auto;
  width: 500px;
  height: 320px;
  overflow: hidden;
  position: relative;
}

.photo {
    position: absolute;

    -webkit-animation: round 16s infinite;
    -moz-animation: round 16s infinite;
    -ms-animation: round 16s infinite;
    -o-animation: round 16s infinite;
    animation: round 16s infinite;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
    opacity: 0;
}

@keyframes "round" {
    25% {
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
   	    filter: alpha(opacity=100);
   	    opacity: 1;
 }
 40% {
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
   	filter: alpha(opacity=0);
   	opacity: 0;
 }

}

@-moz-keyframes round {
 25% {
   filter: alpha(opacity=100);
   opacity: 1;
 }
 40% {
   filter: alpha(opacity=0);
   opacity: 0;
 }

}

@-webkit-keyframes "round" {
 25% {
   filter: alpha(opacity=100);
   opacity: 1;
 }
 40% {
   filter: alpha(opacity=0);
   opacity: 0;
 }

}

@-ms-keyframes "round" {
 25% {
   -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
   filter: alpha(opacity=100);
   opacity: 1;
 }
 40% {
   -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
   filter: alpha(opacity=0);
   opacity: 0;
 }

}

@-o-keyframes "round" {
 25% {
   filter: alpha(opacity=100);
   opacity: 1;
 }
 40% {
   filter: alpha(opacity=0);
   opacity: 0;
 }

}
.slider img:nth-child(20) {
	-webkit-animation-delay: 76s;
	-moz-animation-delay: 76s;
	-ms-animation-delay: 76s;
	-o-animation-delay: 76s;
	animation-delay: 76s;
}

.slider img:nth-child(19) {
	-webkit-animation-delay: 72s;
	-moz-animation-delay: 72s;
	-ms-animation-delay: 72s;
	-o-animation-delay: 72s;
	animation-delay: 72s;
}

.slider img:nth-child(18) {
	-webkit-animation-delay: 68s;
	-moz-animation-delay: 68s;
	-ms-animation-delay: 68s;
	-o-animation-delay: 68s;
	animation-delay: 68s;
}

.slider img:nth-child(17) {
	-webkit-animation-delay: 64s;
	-moz-animation-delay: 64s;
	-ms-animation-delay: 64s;
	-o-animation-delay: 64s;
	animation-delay: 64s;
}

.slider img:nth-child(16) {
	-webkit-animation-delay: 60s;
	-moz-animation-delay: 60s;
	-ms-animation-delay: 60s;
	-o-animation-delay: 60s;
	animation-delay: 60s;
}

.slider img:nth-child(15) {
	-webkit-animation-delay: 56s;
	-moz-animation-delay: 56s;
	-ms-animation-delay: 56s;
	-o-animation-delay: 56s;
	animation-delay: 56s;
}

.slider img:nth-child(14) {
	-webkit-animation-delay: 52s;
	-moz-animation-delay: 52s;
	-ms-animation-delay: 52s;
	-o-animation-delay: 52s;
	animation-delay: 52s;
}

.slider img:nth-child(13) {
	-webkit-animation-delay: 48s;
	-moz-animation-delay: 48s;
	-ms-animation-delay: 48s;
	-o-animation-delay: 48s;
	animation-delay: 48s;
}

.slider img:nth-child(12) {
	-webkit-animation-delay: 44s;
	-moz-animation-delay: 44s;
	-ms-animation-delay: 44s;
	-o-animation-delay: 44s;
	animation-delay: 44s;
}

.slider img:nth-child(11) {
	-webkit-animation-delay: 40s;
	-moz-animation-delay: 40s;
	-ms-animation-delay: 40s;
	-o-animation-delay: 40s;
	animation-delay: 40s;
}

slider img:nth-child(10) {
	-webkit-animation-delay: 36s;
	-moz-animation-delay: 36s;
	-ms-animation-delay: 36s;
	-o-animation-delay: 36s;
	animation-delay: 36s;
}

.slider img:nth-child(9) {
	-webkit-animation-delay: 32s;
	-moz-animation-delay: 32s;
	-ms-animation-delay: 32s;
	-o-animation-delay: 32s;
	animation-delay: 32s;
}

.slider img:nth-child(8) {
	-webkit-animation-delay: 28s;
	-moz-animation-delay: 28s;
	-ms-animation-delay: 28s;
	-o-animation-delay: 28s;
	animation-delay: 28s;
}

.slider img:nth-child(7) {
	-webkit-animation-delay: 24s;
	-moz-animation-delay: 24s;
	-ms-animation-delay: 24s;
	-o-animation-delay: 24s;
	animation-delay: 24s;
}

.slider img:nth-child(6) {
	-webkit-animation-delay: 20s;
	-moz-animation-delay: 20s;
	-ms-animation-delay: 20s;
	-o-animation-delay: 20s;
	animation-delay: 20s;
}

.slider img:nth-child(5) {
	-webkit-animation-delay: 16s;
	-moz-animation-delay: 16s;
	-ms-animation-delay: 16s;
	-o-animation-delay: 16s;
	animation-delay: 16s;
}

.slider img:nth-child(4) {
	-webkit-animation-delay: 12s;
	-moz-animation-delay: 12s;
	-ms-animation-delay: 12s;
	-o-animation-delay: 12s;
	animation-delay: 12s;
}

.slider img:nth-child(3) {
	-webkit-animation-delay: 8s;
	-moz-animation-delay: 8s;
	-ms-animation-delay: 8s;
	-o-animation-delay: 8s;
	animation-delay: 8s;
}

.slider img:nth-child(2) {
	-webkit-animation-delay: 4s;
	-moz-animation-delay: 4s;
	-ms-animation-delay: 4s;
	-o-animation-delay: 4s;
	animation-delay: 4s;
}

.slider img:nth-child(1) {
	-webkit-animation-delay: 0s;
	-moz-animation-delay: 0s;
	-ms-animation-delay: 0s;
	-o-animation-delay: 0s;
	animation-delay: 0s;
}

＆＃13;

<div class="slider">
  <img class='photo' src="http://farm9.staticflickr.com/8241/8562523343_9bb49b7b7b.jpg" alt="" />
  <img class='photo' src="http://farm9.staticflickr.com/8320/8035372009_7075c719d9.jpg" alt="" />
  <img class='photo' src="http://farm9.staticflickr.com/8465/8113424031_72048dd887.jpg" alt="" />
  <img class='photo' src="http://farm9.staticflickr.com/8465/8113424031_72048dd887.jpg" alt="" />
</div>

＆＃13;

Answer 1

您的关键帧似乎只针对webkit浏览器。试试这个：

/* Chrome, Safari, Opera */ 
@-webkit-keyframes round {
  25% {
    opacity: 1;
  }
  40% {
    opacity: 0;
  }
}
/* Standard syntax */ 
@keyframes round {
  25% {
    opacity: 1;
  }
  40% {
    opacity: 0;
  }
}

也是您的CSS

.photo {
  position: absolute;
  -webkit-animation: round 16s infinite;
  -ms-animation: round 16s infinite;
  animation: round 16s infinite;
  opacity: 0;
  width: 100%;
}

Forked Copy

Answer 2

你是否正在使用webkit前缀？加上这个：

-webkit-animation: round 16s infinite;
animation: round 16s infinite;

Answer 3

IE中css动画问题的可能解决方案。

我制作了一个css图像滑块，它在IE以外的所有浏览器中都运行良好。我尝试了网上发现的所有建议，但没有人工作。最后我删除了整个页面，最终发现它只能在IE中使用标题中的内联样式。（即Windows 7上的IE11尚未测试其他IE版本）

CSS Slide Show不适用于IE

3 个答案: