html - 纯 CSS slider

Question

所以我开始熟悉css3并且我一直在尝试找到一个纯css slider 。我终于找到了一个与我在代码笔上寻找的完全一样的代码，但由于某种原因，当我在 localhost 或 jsfiddle 中尝试代码时，它不起作用。据我在 codepen 中所知，它没有访问任何外部文件，也不需要 jQuery。下面我链接了(工作)codepen 和 jsfiddle。有什么想法为什么它在其他地方不起作用吗？

<强> codepen

<强> jsFiddle

html

<div class="slider">
  <img class='photo'  src="http://i.imgur.com/zMGSiyl.jpg" alt="" />
  <img class='photo'  src="http://i.imgur.com/soQhb13.jpg" alt="" />
  <img class='photo'  src="http://i.imgur.com/39yOaYB.jpg" alt="" />
  <img class='photo'  src="http://i.imgur.com/tnctKD4.jpg" alt="" />
</div>

CSS

body{background:#000;}

.slider{
  margin:50px auto;
  width:100%;
  height:300px;
  overflow:hidden;
  position:relative;

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

}
@keyframes round{   
  25%{opacity:1;}
  40%{opacity:0;}
} 

img:nth-child(4){animation-delay:0s;}
img:nth-child(3){animation-delay:4s;}
img:nth-child(2){animation-delay:8s;}
img:nth-child(1){animation-delay:12s;}

Answer 1

您可能需要使用供应商特定的关键帧。 Codepen 很聪明，在这种情况下补偿过度。

@-webkit-keyframes NAME-YOUR-ANIMATION {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}
@-moz-keyframes NAME-YOUR-ANIMATION {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}
@-o-keyframes NAME-YOUR-ANIMATION {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}
@keyframes NAME-YOUR-ANIMATION {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}

更多信息http://css-tricks.com/snippets/css/keyframe-animation-syntax/