CSS Slideshow - HELP!!!!

I am replacing the old javascript slideshow on my companies website with a new CSS3 animation slideshow. I am a noobie when it comes it comes to coding but I do have a basic understanding of at least editing it. The animation timing is baffling me at the moment. Here are the HTML and CSS Sections. Here is the live website. I have it working mostly, but the timing is off. www.chairslippers.com I need assistance with the keyframe xfades and the opacity. I do not quite understand how it works. Any help would be appreciated!

HTML:

<div class="css-slideshow">
    <figure><img src="images/slides/1.jpg" width="750" height="334" /></figure>
    <figure><img src="images/slides/2.jpg" width="750" height="334" /></figure>
    <figure><img src="images/slides/3.jpg" width="750" height="334" /></figure>
    <figure><img src="images/slides/4.jpg" width="750" height="334" /></figure>
</div>

Code:

.css-slideshow{
  position: relative;
  max-width: 750px;
  height: 334px;
  margin: 5em auto .5em auto;
}
.css-slideshow figure{
  margin: 0;
  max-width: 750px;
  height: 334px;
  background: #000;
  position: absolute;
}
.css-slideshow img{
  box-shadow: 0 0 4px #666;
}
.css-slideshow figure{
  opacity:0;
  filter: alpha(opacity=0);
}
figure:nth-child(1) {
  -webkit-animation: xfade 48s 36s infinite;
          animation: xfade 48s 36s infinite;
}
figure:nth-child(2) {
  -webkit-animation: xfade 48s 24s infinite;
          animation: xfade 48s 24s infinite;
}
figure:nth-child(3) {
  -webkit-animation: xfade 48s 12s infinite;
          animation: xfade 48s 12s infinite;
}
figure:nth-child(4) {
  -webkit-animation: xfade 48s 0s infinite;
          animation: xfade 48s 0s infinite;
}
@-webkit-keyframes xfade{
0% {
opacity:0;
filter: alpha(opacity=0);
}
12.5% {
opacity:1;
filter: alpha(opacity=100);
}
25%{
opacity: 0;
filter: alpha(opacity=0);
}
90%{
opacity: 0;
filter: alpha(opacity=0);
}
100% {
opacity:1;
filter: alpha(opacity=100);
}
}

@keyframes xfade{
0% {
opacity:0;
filter: alpha(opacity=0);
}
12.5% {
opacity:1;
filter: alpha(opacity=100);
}
25%{
opacity: 0;
filter: alpha(opacity=0);
}
90%{
opacity: 0;
filter: alpha(opacity=0);
}
100% {
opacity:1;
filter: alpha(opacity=100);
}
}