Why wont my CSS slideshow work? - html

Question

I followed a tutorial for a CSS slideshow. It worked perfectly on the demo on codepen, but it doesn't seem to work when I try it on the website. Could it be that the site is not live yet? Or is that really stupid?
<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

It won't be because the site isn't live, but for starts you haven't defined xfade, it'll be something like:
#keyframes xfade{
20% {
opacity:1;
}
50% {
opacity:0.5;
}
70% {
opacity:0;
}
}
depending on what you want, best way though to get help on here is to create a jsfiddle: http://jsfiddle.net/