为什么我的CSS幻灯片无法正常工作？

Question

我遵循了CSS幻灯片教程。 它可以在Codepen上的演示中完美运行，但是当我在网站上尝试时似乎不起作用。 可能是该站点尚未上线吗？ 还是真的很愚蠢？

<div class="css-slideshow grid_6">
    <figure>
        <img src="http://v3.img.bostitch.eu/products/tools/ms-3219-e.jpg" alt="class-header-css3" width="250" height="250" class="alignnone size-full wp-image-172" />      
    </figure>
    <figure>
        <img src="http://v3.img.bostitch.eu/products/gallery/ms-series-%28app1%29.jpg" alt="class-header-semantics" width="250" height="250" class="alignnone size-full wp-image-179" />
    </figure>
</div>



.css-slideshow{position: relative;
     max-width: 250px;
     height: 250px;
}
.css-slideshow figure{
     margin: 0;
     max-width: 250px;
     height: 250px;
     background: #000;
     position: absolute;
}
.css-slideshow img{
     box-shadow: 0 0 2px #666;
}
.css-slideshow:hover figure figcaption{
     transition: opacity .5s;
     opacity: 1;
}
.css-slideshow-attr{
     max-width: 495px;
     text-align: right;
     font-size: .7em;
     font-style: italic;
     margin:0 auto;
}
.css-slideshow-attr a{
     color: #666;
}
.css-slideshow figure{
     opacity:0;
}
figure:nth-child(1) {
     animation: xfade 12s 6s infinite;
}
figure:nth-child(2) {
     animation: xfade 6s 0s infinite;
}

Answer 1

不会因为该站点没有运行而引起的，但是对于开始时您尚未定义xfade来说，它将类似于：

@keyframes xfade{
  20% {
    opacity:1;
  }
  50% {
    opacity:0.5;
  }
  70% {
    opacity:0;
  }
}

根据您的需要，在此处获得帮助的最佳方法是创建一个jsfiddle： http : //jsfiddle.net/