CSS Slideshow Using Keyframes works in all browsers except Safari

Question

I have no doubt that I'm dealing with my ignorance, but I've got a short code sample for a CSS-based slideshow using keyframes (see JSFiddle (https://jsfiddle.net/puwq00kb/8/) that works with Chrome, FireFox, and IE 11 but NOT Safari (v8.0.6).

Absolutely nothing appears when using Safari, but the images properly cycle for all other browsers. Anyone got a clue what I'm doing wrong?

A series of statements contain images, and timing is controlled via keyframes and nth-child statements.

<div class="RevolvingImages">
   <figure>
      <img src="http://themarklee.com/wp-content/uploads/2013/10/class-header-css3.jpg" height="262">
   </figure>
   <figure>
       <img src="http://themarklee.com/wp-content/uploads/2013/10/class-header-semantics.jpg" height="262">
   </figure>
</div>

The rest is done in CSS. The enclosing DIV simply places the content:

.RevolvingImages {
   position: relative;
   top: 100px;
   left: 40px;
   max-width: 350px;
   height: 262px;
}

The figures are stacked on top of each other:

.RevolvingImages figure {
   max-width: 350px;
   height: 262px;
   background: #000;
   position: absolute;
}

The relative timing is set in CSS in the following manner:

figure:nth-child(1) {
   animation: xfade 6s 3s infinite;
   z-index:20;
}
figure:nth-child(2) {
   animation: xfade 6s 0s infinite;
   z-index:10;
}

And the fading between images is done in CSS via keyframes:

@keyframes xfade {
   0% {
   opacity:1;
   }
   48% {
   opacity:1;
   }
   50% {
   opacity:0;
   }
   98% {
   opacity:0;
   }
   100% {
   opacity:1;
   }
}

Thanks!

Answer 1

I stumbled on a solution, but it's ugly (centralization of code is compromised).

In each of the nth-child statements I added a -webkit statement as follows

figure:nth-child(1) {
   -webkit-animation: xfade 6s 3s infinite;
   -moz-animation: xfade 6s 3s infinite;
   -ms-animation: xfade 6s 3s infinite;
   animation: xfade 6s 3s infinite;
   z-index:20;
}

Also, in addition to the @keyframe section in CSS I added an additional section as follows:

@-webkit-keyframes "xfade" {
   0% {
       filter:alpha(opacity=100);
       opacity:1;
   }
   48% {
       filter:alpha(opacity=100);
       opacity:1;
   }
   50% {
        filter:alpha(opacity=0);
        opacity:0;
   }
   98% {
       filter:alpha(opacity=0);
       opacity:0;
   }
   100% {
       filter:alpha(opacity=100);
       opacity:1;
   }
}

Similar sections were created for -moz and -ms to cover most browsers.