CSS Slideshow Using Keyframes works in all browsers except Safari - slideshow

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.